Select

import * as React from "react"
import { ChevronDown } from "lucide-react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement> & { label?: string; hint?: string }>(
  ({ label, hint, id, className, children, ...props }, ref) => {
    const generated = React.useId()
    const selectId = id ?? generated
    return (
      <label className="dos-field" htmlFor={selectId}>
        {label && <span className="dos-field__label">{label}</span>}
        <span className="dos-select-wrap">
          <select ref={ref} id={selectId} className={cn("dos-select", className)} aria-describedby={hint ? `${selectId}-hint` : undefined} {...props}>{children}</select>
          <ChevronDown aria-hidden="true" />
        </span>
        {hint && <span id={`${selectId}-hint`} className="dos-field__hint">{hint}</span>}
      </label>
    )
  },
)
Select.displayName = "Select"