import { IconChevronDown } from "./icons";

export type FilterSelectProps = {
  value: string;
  options: readonly string[];
  onChange: (value: string) => void;
  disabled?: boolean;
  className?: string;
};

export function FilterSelect({
  value,
  options,
  onChange,
  disabled = false,
  className = "relative min-w-[180px] flex-1 max-w-[220px]",
}: FilterSelectProps) {
  return (
    <div className={className}>
      <select
        value={value}
        onChange={(event) => onChange(event.target.value)}
        disabled={disabled}
        className="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"
      >
        {options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
      <IconChevronDown className="pointer-events-none absolute top-1/2 right-[22px] size-5 -translate-y-1/2 text-neutral-100" />
    </div>
  );
}