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

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  label?: string;
  error?: string;
  helperText?: string;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  size?: "sm" | "md" | "lg" | number;
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      type = "text",
      label,
      error,
      helperText,
      leftIcon,
      rightIcon,
      id,
      disabled,
      size = "md",
      ...props
    },
    ref
  ) => {
    const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);

    return (
      <div className="w-full space-y-1.5">
        {label && (
          <label
            htmlFor={inputId}
            className="block text-xs font-semibold text-brand-text tracking-wide uppercase"
          >
            {label}
          </label>
        )}
        <div className="relative flex items-center">
          {leftIcon && (
            <div className="absolute left-3 flex items-center pointer-events-none text-brand-secondary">
              {leftIcon}
            </div>
          )}
          <input
            id={inputId}
            type={type}
            ref={ref}
            disabled={disabled}
            className={cn(
              "w-full bg-white text-brand-text rounded-md border border-brand-border transition-colors duration-150",
              size === "sm" ? "h-8 px-2.5 py-1 text-xs" : size === "lg" ? "h-12 px-4 py-3 text-base" : "h-10 px-3 py-2 text-sm",
              "placeholder:text-brand-secondary/60",
              "focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue",
              "disabled:bg-slate-50 disabled:text-brand-secondary disabled:cursor-not-allowed",
              leftIcon && (size === "sm" ? "pl-8" : "pl-9"),
              rightIcon && (size === "sm" ? "pr-8" : "pr-9"),
              error && "border-brand-danger focus:border-brand-danger focus:ring-brand-danger/20",
              className
            )}
            {...props}
          />
          {rightIcon && (
            <div className="absolute right-3 flex items-center pointer-events-none text-brand-secondary">
              {rightIcon}
            </div>
          )}
        </div>
        {error ? (
          <p className="text-xs text-brand-danger font-medium">{error}</p>
        ) : helperText ? (
          <p className="text-xs text-brand-secondary">{helperText}</p>
        ) : null}
      </div>
    );
  }
);

Input.displayName = "Input";