import { cn } from '@/lib/utils'

/**
 * Bewusst das native <select>: es bedient sich auf dem Handy mit dem
 * Systemdialog, ist ohne Zusatzcode tastaturbedienbar und braucht kein
 * JavaScript, damit ein Formular abgeschickt werden kann.
 */
function Select({ className, children, ...rest }: React.ComponentProps<'select'>) {
  return (
    <select
      className={cn(
        'border-eingabe bg-karte h-9 w-full rounded-md border px-3 text-sm shadow-xs transition-colors outline-none',
        'focus-visible:border-ring focus-visible:ring-ring/40 focus-visible:ring-2',
        'aria-invalid:border-gefahr aria-invalid:ring-gefahr/30',
        'disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...rest}
    >
      {children}
    </select>
  )
}

export { Select }