import { cn } from "@/app/lib/cn";
import { ArrowDown2 } from "iconsax-reactjs";
import { FC } from "react";

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

type Props = {
  options?: readonly SelectOption[];
  className?: string;
  placeholder?: string;
} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "placeholder">;

const Select: FC<Props> = ({ options, className, placeholder, children, ...rest }) => {
  return (
    <div className="relative w-full" dir="rtl">
      <select
        className={cn(
          "h-10 w-full appearance-none rounded-2xl border border-secondary bg-white px-4 pl-11 text-right text-sm transition-colors focus:border-primary disabled:pointer-events-none disabled:opacity-50",
          className,
        )}
        {...rest}
      >
        {placeholder && (
          <option value="" disabled hidden>
            {placeholder}
          </option>
        )}
        {options?.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
        {children}
      </select>
      <ArrowDown2 aria-hidden="true" className="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-black" color="currentColor" size={18} />
    </div>
  );
};

export default Select;