import { forwardRef, type ComponentPropsWithoutRef } from "react";

const selectChevronStyle = {
  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
} as const;

type SelectProps = ComponentPropsWithoutRef<"select"> & {
  selectSize?: "default" | "sm";
};

export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
  { className = "", selectSize = "default", style, children, ...props },
  ref,
) {
  const sizeClassName =
    selectSize === "sm"
      ? "h-11 pl-8 pr-3"
      : "h-12 pl-8 pr-4";

  return (
    <select
      ref={ref}
      style={{ ...selectChevronStyle, ...style }}
      className={`w-full appearance-none rounded-2xl bg-input bg-[length:1rem_1rem] bg-[position:left_0.5rem_center] bg-no-repeat text-sm shadow-soft-sm ring-1 ring-border outline-none transition-shadow focus:ring-2 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-60 ${sizeClassName} ${className}`}
      {...props}
    >
      {children}
    </select>
  );
});

export type { SelectProps };