import { ArrowDown2 } from "iconsax-react";
import { FC, SelectHTMLAttributes } from "react";
import { clx } from "../helpers/utils";
import Error from "./Error";

export type ItemsSelectType = {
  value: string;
  label: string;
};
type Props = {
  className?: string;
  items: ItemsSelectType[];
  error_text?: string;
  placeholder?: string;
  label?: string;
  labelClassName?: string;
} & SelectHTMLAttributes<HTMLSelectElement>;

const Select: FC<Props> = (props: Props) => {
  return (
    <div className="w-full relative">
      {props.label && <label className={clx("text-sm", props.labelClassName)}>{props.label}</label>}
      <div className={clx("relative", props.label && "mt-1")}>
        <select {...props} className={clx("w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray", props.className)}>
          {props.placeholder && (
            <option value="" disabled selected={!props.value}>
              {props.placeholder}
            </option>
          )}
          {props.items?.map((item) => {
            return (
              <option key={item.value} value={item.value}>
                {item.label}
              </option>
            );
          })}
        </select>
        <ArrowDown2 size={16} color="black" className="absolute z-0 top-0 bottom-0 my-auto left-2" />
      </div>
      {props.error_text && props.error_text !== "" ? <Error errorText={props.error_text} /> : null}
    </div>
  );
};

export default Select;