type SelectFieldProps = {
    value: string;
    onChange: (value: string) => void;
    options: { value: string; label: string }[];
    className?: string;
};

/**
 * SelectField - A dropdown styled consistently with input fields
 */
export default function SelectField({value, onChange, options, className = ''}: SelectFieldProps) {
    return (
        <select
            value={value}
            onChange={(e) => onChange(e.target.value)}
            className={`p-2 w-full border rounded-md bg-white border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900 cursor-pointer ${className}`}
        >
            {options.map((option) => (
                <option key={option.value} value={option.value}>
                    {option.label}
                </option>
            ))}
        </select>
    );
}