import React, { ChangeEvent, useState, FC } from 'react';

interface OptionType {
    value: string;
    label: string;
}

interface DropdownProps {
    options: OptionType[];
    value: string;
    onChange: (value: string) => void;
    isError?: boolean;
    errorMessage?: string;
    id?: string;
}

const GeneratorDropdown: FC<DropdownProps> = ({
    options,
    value,
    onChange,
    isError = false,
    errorMessage = "This field is required",
    id,
}) => {

    const handleDropdownChange = (e: ChangeEvent<HTMLSelectElement>) => {
        onChange(e.target.value);
    };

    return (
        <div>
            <div className="relative">
                <select
                    id={id}
                    value={value}
                    onChange={handleDropdownChange}
                    className={`h-[42px] text-sm py-1 px-4 w-full border border-gray-200 ${isError ? 'border-red-500 focus:border-red-500' : 'border border-solid'} bg-gray-75 rounded-md text-md focus:outline-none focus-visible:border-primary-400 focus:ring-primary-400 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400`}
                >
                    {options.map(option => (
                        <option key={option.value} value={option.value}>{option.label}</option>
                    ))}
                </select>
                {isError &&
                    <div className="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-8">
                        <svg className="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                        </svg>
                    </div>
                }
            </div>
            {isError && <p className="text-sm text-red-500 mt-2">{errorMessage}</p>}
        </div>
    );
};

export default GeneratorDropdown;