/**
 * 统一的 Input 组件
 * 支持多种尺寸、状态和图标
 */
import React from "react";
import type { LucideIcon } from "lucide-react";

export type InputSize = "sm" | "md" | "lg";

export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
  size?: InputSize;
  error?: string;
  icon?: LucideIcon;
  iconPosition?: "left" | "right";
}

const sizeStyles: Record<InputSize, { input: string; icon: string }> = {
  sm: { input: "px-3 py-1.5 text-sm", icon: "w-4 h-4" },
  md: { input: "px-3 py-2 text-sm", icon: "w-4 h-4" },
  lg: { input: "px-4 py-3 text-base", icon: "w-5 h-5" },
};

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ size = "md", error, icon: Icon, iconPosition = "left", className = "", ...props }, ref) => {
    const baseStyles = "w-full bg-white border text-slate-900 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-slate-400";
    const errorStyles = error ? "border-red-500 focus:ring-red-500 focus:border-red-500" : "border-slate-300";
    const iconPadding = Icon
      ? iconPosition === "left"
        ? "pl-10"
        : "pr-10"
      : "";

    const combinedClassName = `
      ${baseStyles}
      ${sizeStyles[size].input}
      ${errorStyles}
      ${iconPadding}
      ${className}
    `.trim();

    return (
      <div className="relative">
        {Icon && iconPosition === "left" && (
          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
            <Icon className={sizeStyles[size].icon} />
          </div>
        )}
        <input ref={ref} className={combinedClassName} {...props} />
        {Icon && iconPosition === "right" && (
          <div className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
            <Icon className={sizeStyles[size].icon} />
          </div>
        )}
        {error && (
          <p className="mt-1 text-xs text-red-400">{error}</p>
        )}
      </div>
    );
  }
);

Input.displayName = "Input";
