"use client";

import { SelectHTMLAttributes, forwardRef } from "react";

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

interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
    label?: string;
    error?: string;
    helperText?: string;
    leftIcon?: string;
    options: SelectOption[];
    placeholder?: string;
}

const Select = forwardRef<HTMLSelectElement, SelectProps>(
    (
        {
            label,
            error,
            helperText,
            leftIcon,
            options,
            placeholder,
            className = "",
            ...props
        },
        ref
    ) => {
        return (
            <div className="w-full">
                {label && (
                    <label className="block text-[13px] font-semibold text-zinc-900 mb-2">
                        {label}
                        {props.required && <span className="text-brand-500 ml-1">*</span>}
                    </label>
                )}
                <div className="relative">
                    {leftIcon && (
                        <i
                            className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none z-10`}
                        />
                    )}
                    <select
                        ref={ref}
                        className={`
              w-full px-3.5 py-3 text-[14px] font-normal
              border rounded-md bg-white
              text-zinc-900
              transition-all appearance-none
              cursor-pointer
              ${leftIcon ? "pl-11" : ""}
              pr-11
              ${error
                                ? "border-red-500 focus:border-red-500"
                                : "border-zinc-200 focus:border-brand-500"
                            }
              outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
              disabled:bg-zinc-100 disabled:cursor-not-allowed
              ${className}
            `}
                        {...props}
                    >
                        <option value="" disabled>
                            {placeholder || "Selecione uma opção"}
                        </option>
                        {options.map((option) => (
                            <option key={option.value} value={option.value}>
                                {option.label}
                            </option>
                        ))}
                    </select>
                    <i className="ri-arrow-down-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none" />
                </div>
                {helperText && !error && (
                    <p className="mt-1.5 text-[12px] text-zinc-500">{helperText}</p>
                )}
                {error && <p className="mt-1.5 text-[12px] text-red-500">{error}</p>}
            </div>
        );
    }
);

Select.displayName = "Select";

export default Select;