import React, { forwardRef, useId } from 'react';
import { cn } from '@/utils/utils';

const sizeStyles = {
  sm: "px-3 py-1.5 text-xs",
  md: "px-4 py-2.5 text-sm",
};

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  sizeVariant?: keyof typeof sizeStyles; // Gestion de la taille
  leftIcon?: React.ReactNode;          // Icône optionnelle intégrée à gauche
  rightIcon?: React.ReactNode;         // Icône optionnelle intégrée à droite
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ 
    className, 
    label, 
    error, 
    id, 
    sizeVariant = 'md', 
    leftIcon, 
    rightIcon, 
    ...props 
  }, ref) => {
    const autoId = useId();
    const inputId = id || autoId;

    return (
      <div className="w-full">
        {label && (
          <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 mb-1.5">
            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
          </label>
        )}
        
        <div className="relative flex items-center w-full">
          {/* Icône à gauche */}
          {leftIcon && (
            <span className="absolute left-3 text-slate-400 pointer-events-none flex items-center">
              {leftIcon}
            </span>
          )}

          <input
            id={inputId}
            ref={ref}
            className={cn(
              "flex w-full rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors",
              sizeStyles[sizeVariant],
              leftIcon && "pl-9",  // Décale le texte à droite si icône gauche
              rightIcon && "pr-9", // Décale le texte à gauche si icône droite
              error && "border-red-500 focus:ring-red-500 focus:border-red-500",
              className
            )}
            {...props}
          />

          {/* Icône à droite */}
          {rightIcon && (
            <span className="absolute right-3 text-slate-400 pointer-events-none flex items-center">
              {rightIcon}
            </span>
          )}
        </div>

        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
      </div>
    );
  }
);

Input.displayName = "Input";