import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import { Icon } from '../../atoms';
import { getGlobalStyle } from '../../../helpers';
interface PasswordValidatorProps {
    password: string;
}

interface Requirement {
    label: string;
    test: (password: string) => boolean;
}

export const PasswordValidator: React.FC<PasswordValidatorProps> = ({ password }) => {
    const requirements: Requirement[] = [
        { label: 'Al menos una minúscula y una mayúscula', test: (pwd) => /[a-z]/.test(pwd) && /[A-Z]/.test(pwd) },
        { label: 'Mínimo 8 caracteres', test: (pwd) => Number(pwd?.length) >= 8 },
        { label: 'Al menos un número', test: (pwd) => /\d/.test(pwd) },
    ];

    return (
        <div className={styles["password-validator"]}>
            <ul>
                {requirements.map((req, index) => {
                    const isValid = req.test(password)
                    return (
                            <li key={index} className={clsx({ 'text-green-500': isValid, 'text-red-500': !isValid })}>
                                <div>
                                    <Icon icon={isValid ? 'IconCircularCheck' : 'IconClose'} color={getGlobalStyle(isValid ? '--color-icons-success' : '--color-text-error')} size={20} height={20} width={20} />
                                </div>
                                {req.label}
                            </li>
                    )
                })}
            </ul>
        </div>
    );
};