import { Box, Typography } from '@mui/material';
import { TickCircle } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';

interface ValidationItemProps {
  isValid: boolean;
  label: string;
}

export function PasswordValidationItem({
  isValid,
  label,
}: ValidationItemProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        mb: 0.5,
        flexWrap: 'wrap',
      }}
    >
      <Icon
        Component={TickCircle}
        color={isValid ? 'success.main' : 'primary.main'}
        variant={isValid ? 'Bold' : 'Outline'}
        size="small"
      />
      <Typography
        variant="body2"
        color="text.primary"
        sx={{
          fontSize: { xs: '0.85rem', sm: '0.875rem' },
          wordBreak: 'break-word',
          flex: 1,
        }}
      >
        {label}
      </Typography>
    </Box>
  );
}