import { cn } from "../lib/cn";

const control =
  "mt-2 w-full rounded-md border border-line bg-white px-3.5 py-2.5 text-sm text-ink outline-none transition placeholder:text-muted/70 focus:border-primary focus:ring-2 focus:ring-primary/15 aria-invalid:border-danger aria-invalid:ring-danger/15 dark:bg-paper dark:[color-scheme:dark]";

export function Input({
  label,
  error,
  className,
  ...props
}) {
  return (
    <label className="block text-sm font-semibold text-ink">
      {label}
      <input className={cn(control, className)} aria-invalid={!!error} {...props} />
      {error && <span className="mt-1.5 block text-xs text-danger">{error}</span>}
    </label>
  );
}

export function Textarea({
  label,
  error,
  className,
  ...props
}) {
  return (
    <label className="block text-sm font-semibold text-ink">
      {label}
      <textarea
        className={cn(control, "min-h-28 resize-y", className)}
        aria-invalid={!!error}
        {...props}
      />
      {error && <span className="mt-1.5 block text-xs text-danger">{error}</span>}
    </label>
  );
}

export function Select({
  label,
  className,
  children,
  ...props
}) {
  return (
    <label className="block text-sm font-semibold text-ink">
      {label}
      <select className={cn(control, className)} {...props}>
        {children}
      </select>
    </label>
  );
}
