Frontend/src/components/Input.tsx

import React, { forwardRef } from 'react';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    error?: string;
    icon?: React.ReactNode;
    rightElement?: React.ReactNode;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(({
    label,
    error,
    icon,
    rightElement,
    className = '',
    ...props
}, ref) => {
    return (
        <div className="w-full">
            {label && (
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
                    {label}
                </label>
            )}
            <div className="relative flex items-center">
                {icon && (
                    <div className="absolute left-3.5 text-slate-400">
                        {icon}
                    </div>
                )}
                <input
                    ref={ref}
                    className={`
            w-full px-4 py-3 rounded-xl border bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500
            ${icon ? 'pl-10' : ''}
            ${rightElement ? 'pr-14' : ''}
                            ? 'border-red-300 dark:border-red-900/50 focus:ring-red-200 dark:focus:ring-red-900/20 focus:border-red-400'
                            : 'border-slate-200 dark:border-slate-700 focus:ring-blue-100 dark:focus:ring-blue-900/20 focus:border-blue-400 dark:focus:border-blue-500'
                        }
            focus:outline-none focus:ring-2 transition-all duration-200
            ${className}
          `}
                    {...props}
                />
                {rightElement && (
                    <div className="absolute right-2 flex items-center">
                        {rightElement}
                    </div>
                )}
            </div>
            {error && (
                <p className="mt-1.5 text-xs text-red-500">{error}</p>
            )}
        </div>
    );
});

Input.displayName = 'Input';