import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';
import { Box } from './Box';
import { IconButton } from './IconButton';
import { Input, InputProps } from './Input';

export interface PasswordFieldProps extends InputProps {
  showPassword?: boolean;
  onTogglePassword?: () => void;
}

export const PasswordField = ({ 
  showPassword: controlledShowPassword, 
  onTogglePassword,
  ...props 
}: PasswordFieldProps) => {
  const [internalShowPassword, setInternalShowPassword] = useState(false);
  
  const isControlled = controlledShowPassword !== undefined;
  const showPassword = isControlled ? controlledShowPassword : internalShowPassword;

  const handleToggle = () => {
    if (onTogglePassword) {
      onTogglePassword();
    }
    if (!isControlled) {
      setInternalShowPassword(!internalShowPassword);
    }
  };

  return (
    <Box position="relative">
      <Input
        {...props}
        type={showPassword ? 'text' : 'password'}
      />
      <Box 
        position="absolute" 
        right="0.5rem" 
        top="50%" 
        style={{ transform: 'translateY(-50%)' }}
        zIndex={10}
      >
        <IconButton
          icon={showPassword ? EyeOff : Eye}
          onClick={handleToggle}
          variant="ghost"
          size="sm"
          title={showPassword ? 'Hide password' : 'Show password'}
        />
      </Box>
    </Box>
  );
};