/** Input — a single-line text field (LD). */

import { forwardRef } from "react";

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

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** When true, paints the danger border (paired with a Field error). */
  invalid?: boolean;
}

/** A themed text input; width is controlled by the parent (defaults to full). */
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { invalid = false, className, ...rest },
  ref,
) {
  return (
    <input
      ref={ref}
      aria-invalid={invalid || undefined}
      className={cn(
        "h-9 w-full rounded-md bg-raised px-3 text-sm text-content",
        "border placeholder:text-faint outline-none transition-colors",
        invalid ? "border-danger" : "border-border focus:border-primary",
        "disabled:opacity-50 disabled:cursor-not-allowed",
        className,
      )}
      {...rest}
    />
  );
});
