import { forwardRef } from "react";
import { cn } from "@/lib/utils";

/**
 * Input texte — primitive minimale.
 * - Pas de shadow, juste 1px line.
 * - Focus = ring rubis-glow + border rubis (pas de blue browser default).
 * - aria-invalid = état d'erreur visible sans dépendre de la lib de form.
 */
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, type = "text", ...props }, ref) => {
    return (
      <input
        ref={ref}
        type={type}
        className={cn(
          // Base
          "block w-full rounded-default border border-line bg-white px-3.5 py-3",
          "font-sans text-[15px] text-ink placeholder:text-ink-3",
          // Transitions
          "transition-[border-color,box-shadow] duration-150",
          // Focus
          "focus:outline-none focus:border-rubis focus:ring-4 focus:ring-rubis-glow",
          // États
          "disabled:cursor-not-allowed disabled:bg-cream-2 disabled:text-ink-3",
          "aria-[invalid=true]:border-rubis-deep aria-[invalid=true]:bg-rubis-glow/30",
          className,
        )}
        {...props}
      />
    );
  },
);
Input.displayName = "Input";