import { useState } from 'react';

const Dropdown = () => {
  const [selectedText, setSelectedText] = useState('Select an option');

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

  return (
    <div className="relative inline-block text-left" data-test="dropdown">
      <p className='flex items-center justify-center'>Dropdown</p>
      <select
        value={selectedText}
        onChange={handleChange}
        className="px-4 py-2 w-100 bg-white rounded hover:bg-gray-300 transition border text-black mt-2"
        data-test="dropdown-select"
      >
        <option value="Select an option" className='text-black' disabled>
          {selectedText}
        </option>
        <option value="Option-1" data-test="option-1">Option 1</option>
        <option value="Option-2" data-test="option-2">Option 2</option>
        <option value="Option-3" data-test="option-3">Option 3</option>
      </select>
    </div>
  );
};

export default Dropdown;