import React from "react";

interface Option {
    value: string;
    label: string;
    id: string;
}
export default function Select({
    placeholder,
    options,
    onChange,
    onBlur,
    name,
    error,
    ref,
    autoComplete = "off",
    className,
}: {
    placeholder?: string;
    options: Option[];
    onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onBlur: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    name: string;
    error?: string;
    ref?: React.Ref<HTMLSelectElement>;
    autoComplete?: string;
    className?:string;
}) {

    return (
        <div className="w-full relative">
            <select className={`appearance-none ly-input ${className ?? ''}`}
                onChange={onChange}
                onBlur={onBlur}
                name={name}
                ref={ref}
                autoComplete={autoComplete}
            >
                {placeholder && <option value="">{placeholder}</option>}
                {options.map((option) => (
                    <option key={option.id} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>
            <svg className="absolute right-2 top-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" d="M18 9L12 15L6 9">
                </path>
            </svg>
            {error && <p className="text-red-500 text-ly-12">{error}</p>}
        </div>
    );
}