import { IconChevronDown } from "./icons";

const selectClassName =
  "text-m-regular h-10 w-full appearance-none rounded-lg border border-neutral-40 bg-neutral-10 px-[22px] py-2 pr-10 text-neutral-100 outline-none focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-60";

export type FormSelectOption = {
  value: string;
  label: string;
};

export type FormSelectProps = {
  id: string;
  label: string;
  value: string;
  placeholder: string;
  options: FormSelectOption[];
  onChange: (value: string) => void;
  disabled?: boolean;
  required?: boolean;
};

export function FormSelect({
  id,
  label,
  value,
  placeholder,
  options,
  onChange,
  disabled,
  required = false,
}: FormSelectProps) {
  return (
    <div className="flex flex-col gap-2">
      <label htmlFor={id} className="text-m-medium text-neutral-100">
        {label}
        {required && <span className="text-danger-500"> *</span>}
      </label>
      <div className="relative">
        <select
          id={id}
          value={value}
          onChange={(event) => onChange(event.target.value)}
          disabled={disabled}
          required={required}
          className={`${selectClassName} ${
            value ? "text-neutral-100" : "text-neutral-70"
          }`}
        >
          <option value="" disabled>
            {placeholder}
          </option>
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        <IconChevronDown className="pointer-events-none absolute top-1/2 right-[22px] size-5 -translate-y-1/2 text-neutral-100" />
      </div>
    </div>
  );
}