import React, { type InputHTMLAttributes, forwardRef } from 'react';
import { motion } from 'motion/react';

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

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, icon, className = '', ...props }, ref) => {
    return (
      <div className={`flex flex-col gap-1.5 w-full ${className}`}>
        {label && (
          <label className="text-xs font-bold tracking-wide text-text-muted uppercase">
            {label}
          </label>
        )}
        <div className="relative flex items-center">
          {icon && (
            <div className="absolute left-3 text-text-muted pointer-events-none">
              {icon}
            </div>
          )}
          <input
            ref={ref}
            className={`
              w-full bg-surface/50 border backdrop-blur-md rounded-xl px-4 py-2.5 
              text-sm text-text placeholder-text-muted/50 outline-none
              transition-all duration-300
              ${icon ? 'pl-10' : ''}
              ${error 
                ? 'border-error/50 focus:border-error focus:ring-2 focus:ring-error/20 bg-error/5' 
                : 'border-border/50 focus:border-primary focus:ring-2 focus:ring-primary/20 hover:border-border hover:bg-surface'
              }
            `}
            {...props}
          />
        </div>
        {error && (
          <motion.p 
            initial={{ opacity: 0, y: -5 }} 
            animate={{ opacity: 1, y: 0 }} 
            className="text-xs font-medium text-error"
          >
            {error}
          </motion.p>
        )}
      </div>
    );
  }
);
Input.displayName = 'Input';