import * as React from "react";

import { ChevronDown } from "lucide-react";

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

export const Select = React.forwardRef<

  HTMLSelectElement,

  React.SelectHTMLAttributes<HTMLSelectElement>

>(function Select({ className, children, ...props }, ref) {

  return (

    <div className="relative">

      <select

        ref={ref}

        className={cn(

          "h-10 w-full appearance-none rounded-[var(--radius)] border border-[var(--color-border-default)] bg-[var(--color-bg-inset)]",

          "px-3 pr-9 text-sm text-[var(--color-fg-primary)]",

          "transition-colors duration-[var(--duration-fast)] focus-visible:border-[var(--color-accent-teal)] focus-visible:outline-none",

          "disabled:cursor-not-allowed disabled:opacity-50",

          className,

        )}

        {...props}

      >

        {children}

      </select>

      <ChevronDown

        className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--color-fg-tertiary)]"

        aria-hidden

      />

    </div>

  );

});