Input

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

export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label?: string
  hint?: string
  error?: string
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ label, hint, error, id, className, ...props }, ref) => {
  const generated = React.useId()
  const inputId = id ?? generated
  const descriptionId = `${inputId}-description`
  return (
    <label className="dos-field" htmlFor={inputId}>
      {label && <span className="dos-field__label">{label}</span>}
      <input ref={ref} id={inputId} className={cn("dos-input", className)} aria-invalid={Boolean(error) || undefined} aria-describedby={hint || error ? descriptionId : undefined} {...props} />
      {(error || hint) && <span id={descriptionId} className="dos-field__hint" style={error ? { color: "var(--dos-danger)" } : undefined}>{error ?? hint}</span>}
    </label>
  )
})
Input.displayName = "Input"