import React from "react";
import { cn } from "@/lib/utils";

export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;

export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, children, style, ...props }, ref) => {
    return (
      <select
        className={cn(
          "flex h-10 w-full rounded-xl border border-[#E1E6E7] bg-white px-3.5 py-2 pr-9 text-sm text-[#2E3A3F] appearance-none cursor-pointer focus-visible:outline-none focus-visible:border-[#4A7C82] focus-visible:ring-2 focus-visible:ring-[#4A7C82]/20 disabled:cursor-not-allowed disabled:opacity-50 transition-all bg-no-repeat bg-[position:right_12px_center]",
          className
        )}
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366767A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
          ...style,
        }}
        ref={ref}
        {...props}
      >
        {children}
      </select>
    );
  }
);
Select.displayName = "Select";