Input

import { useId, type InputHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label: string;
  hint?: string;
  error?: string;
  /** Text shown before the value, e.g. "frame.studio/". */
  prefix?: string;
}

/** Underline field: mono uppercase label, a borderless input on a single bottom hairline that turns ink (2px) on focus, optional prefix, hint or red error. */
export function Input({ label, hint, error, prefix, className, id, ...rest }: InputProps) {
  const auto = useId();
  const iid = id ?? auto;
  const desc = error ? `${iid}-e` : hint ? `${iid}-h` : undefined;
  return (
    <div className={cn("grid gap-1", className)}>
      <label htmlFor={iid} className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">
        {label}
      </label>
      <div
        className={cn(
          "flex items-baseline border-b transition-[border-color,box-shadow] duration-(--da-duration) focus-within:border-da-fg focus-within:shadow-[0_1px_0_0_var(--da-fg)]",
          error ? "border-da-danger" : "border-da-border-strong/40",
        )}
      >
        {prefix && <span className="text-lg text-da-muted-fg">{prefix}</span>}
        <input
          id={iid}
          aria-invalid={error ? true : undefined}
          aria-describedby={desc}
          className="h-11 min-w-0 flex-1 bg-transparent text-lg outline-none placeholder:text-da-muted-fg"
          {...rest}
        />
      </div>
      {error ? (
        <p id={`${iid}-e`} className="text-sm text-da-danger">
          {error}
        </p>
      ) : hint ? (
        <p id={`${iid}-h`} className="text-sm text-da-muted-fg">
          {hint}
        </p>
      ) : null}
    </div>
  );
}

export default Input;