'use client';

import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import { FiEye, FiEyeOff } from 'react-icons/fi';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  icon?: React.ReactNode;
  variant?: 'default' | 'search';
}

export default function Input({
  label,
  error,
  icon,
  variant = 'default',
  type,
  className,
  ...props
}: InputProps) {
  const [showPassword, setShowPassword] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const isPassword = type === 'password';

  return (
    <div className="w-full">
      {label && (
        <label className="block text-sm font-medium text-white/70 mb-1.5">{label}</label>
      )}
      <div className="relative">
        {icon && (
          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40">
            {icon}
          </div>
        )}
        <input
          type={isPassword && showPassword ? 'text' : type}
          className={cn(
            'w-full bg-white/5 border rounded-lg px-4 py-3 text-white placeholder-white/30',
            'focus:outline-none transition-all duration-300',
            variant === 'search'
              ? 'rounded-full px-6 bg-dark-100/80 backdrop-blur-lg border-white/10 focus:border-accent/50 focus:ring-1 focus:ring-accent/30'
              : 'border-white/10 focus:border-primary/50 focus:ring-1 focus:ring-primary/30',
            error ? 'border-red-500/50 focus:border-red-500 focus:ring-red-500/30' : '',
            icon ? 'pl-10' : '',
            isPassword ? 'pr-10' : '',
            isFocused ? 'bg-white/[0.08]' : '',
            className
          )}
          onFocus={(e) => {
            setIsFocused(true);
            props.onFocus?.(e);
          }}
          onBlur={(e) => {
            setIsFocused(false);
            props.onBlur?.(e);
          }}
          {...props}
        />
        {isPassword && (
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-white/40 hover:text-white/70 transition-colors"
          >
            {showPassword ? <FiEyeOff size={18} /> : <FiEye size={18} />}
          </button>
        )}
      </div>
      {error && (
        <p className="mt-1.5 text-sm text-red-400">{error}</p>
      )}
    </div>
  );
}
