import { Box, Typography } from '@mui/material';
import { TickCircle } from 'iconsax-react';
import { Icon } from '@harmony/kit';
import { type ValidationItemProps } from '../../types/settingForm';

export function PasswordValidationItem({
  isValid,
  label,
}: ValidationItemProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        mb: 0.5,
        flexWrap: 'wrap',
      }}
    >
      <Icon
        Component={TickCircle}
        size="small"
        color={isValid ? 'success.main' : 'primary.main'}
        variant={isValid ? 'Bold' : 'Outline'}
      />

      <Typography
        variant="body2"
        color="text.primary"
        sx={{
          wordBreak: 'break-word',
          flex: 1,
        }}
      >
        {label}
      </Typography>
    </Box>
  );
}