import { Input as InputPrimitive } from "@base-ui/react/input"
import { Field } from "@base-ui/react/field"
import { cn } from "cn"

const inputClassName =
  "flex h-10 w-full rounded-md border border-input bg-background px-3 text-body outline-none transition-colors duration-[var(--duration-fast)] ease-out placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-destructive"

function Input({ className, ...props }: InputPrimitive.Props) {
  return (
    <InputPrimitive
      data-slot="input"
      className={cn(inputClassName, className)}
      {...props}
    />
  )
}

function FieldControl({ className, ...props }: React.ComponentProps<typeof Field.Control>) {
  return (
    <Field.Control
      data-slot="field-control"
      className={cn(inputClassName, className)}
      {...props}
    />
  )
}

function FieldLabel({ className, ...props }: React.ComponentProps<typeof Field.Label>) {
  return (
    <Field.Label
      className={cn("text-body font-medium", className)}
      {...props}
    />
  )
}

function FieldError({ className, ...props }: React.ComponentProps<typeof Field.Error>) {
  return (
    <Field.Error
      className={cn("text-small text-signal-error", className)}
      {...props}
    />
  )
}

export { Input, Field, FieldControl, FieldLabel, FieldError }