Input

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

export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
  label: string;
  hideLabel?: boolean;
  hint?: string;
  error?: string;
  leftIcon?: ReactNode;
  /** Element at the end (button, unit, kbd). */
  trailing?: ReactNode;
  size?: "md" | "lg";
  /** Pill-shaped field (search bars, newsletter). */
  pill?: boolean;
  containerClassName?: string;
}

export function Input({
  label,
  hideLabel = false,
  hint,
  error,
  leftIcon,
  trailing,
  size = "md",
  pill = false,
  id,
  disabled,
  className,
  containerClassName,
  ...props
}: InputProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const hintId = `${inputId}-hint`;
  const errorId = `${inputId}-error`;
  const describedBy = [hint && !error && hintId, error && errorId].filter(Boolean).join(" ") || undefined;

  return (
    <div className={cn("flex flex-col gap-2", containerClassName)}>
      <label htmlFor={inputId} className={cn("text-sm font-semibold", hideLabel && "sr-only")}>
        {label}
      </label>
      <div
        className={cn(
          "da-transition flex items-center gap-2 border border-da-border-strong/60 bg-da-input text-da-fg shadow-da-sm backdrop-blur-da backdrop-saturate-150",
          "hover:border-da-border-strong focus-within:border-da-primary/60 focus-within:bg-da-surface focus-within:ring-4 focus-within:ring-da-primary/15",
          error && "border-da-danger/70 focus-within:border-da-danger focus-within:ring-da-danger/15 hover:border-da-danger",
          pill ? "rounded-da-pill" : "rounded-da-md",
          size === "md" ? "h-11 px-3.5 text-sm" : "h-13 px-4 text-base",
          disabled && "opacity-55",
        )}
      >
        {leftIcon && (
          <span aria-hidden className="shrink-0 text-da-muted-fg [&_svg]:size-4">
            {leftIcon}
          </span>
        )}
        <input
          id={inputId}
          disabled={disabled}
          aria-invalid={error ? true : undefined}
          aria-describedby={describedBy}
          className={cn("h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-da-muted-fg disabled:cursor-not-allowed", className)}
          {...props}
        />
        {trailing && <span className="-mr-1.5 flex shrink-0 items-center text-da-muted-fg">{trailing}</span>}
      </div>
      {hint && !error && (
        <p id={hintId} className="text-[13px] text-da-muted-fg">
          {hint}
        </p>
      )}
      {error && (
        <p id={errorId} className="flex items-center gap-1.5 text-[13px] font-medium text-da-danger">
          <span aria-hidden className="grid size-4 place-items-center rounded-full bg-da-danger text-[10px] font-bold text-da-danger-fg">
            !
          </span>
          {error}
        </p>
      )}
    </div>
  );
}

export default Input;