import * as React from 'react';
import { cn } from '@/lib/utils';

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

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, icon, ...props }, ref) => {
    return (
      <div className="relative group">
        {icon && (
          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-kodo-text-dim group-focus-within:text-kodo-cyan transition-colors pointer-events-none">
            {icon}
          </div>
        )}
        <input
          type={type}
          className={cn(
            "flex h-11 w-full rounded-xl border border-white/10 bg-kodo-graphite/40 px-3 py-2 text-sm text-white placeholder:text-kodo-text-dim/50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
            // Glassmorphism & Transition
            "backdrop-blur-sm transition-all duration-200",
            // Focus States - Neon Glow
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan/30 focus-visible:border-kodo-cyan/50",
            // Hover States
            "hover:bg-white/5 hover:border-white/20",
            icon && "pl-10",
            className
          )}
          ref={ref}
          {...props}
        />
      </div>
    );
  }
);
Input.displayName = 'Input';

export { Input };