import React, { ComponentProps } from 'react';
import { Eye, EyeOff, Lock } from 'lucide-react';
import { Input } from './Input';
import { Box } from './Box';

interface PasswordFieldProps extends ComponentProps<typeof Input> {
  showPassword?: boolean;
  onTogglePassword?: () => void;
}

/**
 * PasswordField
 * 
 * A specialized input for passwords with visibility toggling.
 * Stateless UI component.
 */
export function PasswordField({ showPassword, onTogglePassword, ...props }: PasswordFieldProps) {
  return (
    <Box position="relative" fullWidth>
      <Input
        {...props}
        type={showPassword ? 'text' : 'password'}
        icon={<Lock size={16} />}
      />
      {onTogglePassword && (
        <Box
          as="button"
          type="button"
          onClick={onTogglePassword}
          position="absolute"
          right="3"
          top={props.label ? "34px" : "50%"}
          style={props.label ? {} : { transform: 'translateY(-50%)' }}
          zIndex={10}
          className="text-gray-500 hover:text-gray-300 transition-colors"
        >
          {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
        </Box>
      )}
    </Box>
  );
}