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

/**
 * SelectField - A dropdown styled consistently with input fields
 * Generic component that works with any string-based type (including string literals and enums)
 *
 * @example
 * // With UserRole type
 * <SelectField<UserRole>
 *   value={user.role}
 *   onChange={(role) => setUser({...user, role})}
 *   options={UserRoleHelper.getRoleOptions()}
 * />
 *
 * @example
 * // With plain strings
 * <SelectField<string>
 *   value={status}
 *   onChange={setStatus}
 *   options={[{value: "active", label: "Active"}, {value: "inactive", label: "Inactive"}]}
 * />
 */
export default function SelectField<T extends string>({
                                                          value,
                                                          onChange,
                                                          options,
                                                          className = ''
                                                      }: SelectFieldProps<T>) {
    return (
        <select
            value={value}
            onChange={(e) => onChange(e.target.value as T)}
            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>
    );
}