import React, { useState } from 'react';
import Modal from './component/Modal';
import Select from './component/select';
import Button from './component/button';
function Form() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState('None');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name.trim() === '') {
      setError('Name is required');
      return;
    }
    if (selectedOption == 'None') {
      setError('Option is required');
      return;
    }
    setError('');
    setIsModalOpen(true);
  };

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const options = [
    { value: 'None', label: 'None' },
    { value: 'cpp', label: 'Cpp' },
    { value: 'java', label: 'Java' },
    { value: 'python', label: 'Python' },
  ];

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            placeholder='Enter your name'
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <label>Select Course</label>
          <Select options={options} onChange={handleChange} />
          <p>Selected: {selectedOption}</p>
        </div>
        {error && <p>{error}</p>}
      
      <Button label="Submit Button" type="submit" />
      </form>
      {isModalOpen && <Modal name={name} selectedOption={selectedOption} onClose={handleCloseModal} />}
    </div>
  );
}


export default Form;