import { PASSWORD_RULES } from '../utils/passwordRules'

// Règles du mot de passe, cochées au fil de la saisie. À relier au champ via
// aria-describedby={id}.
export default function PasswordRules({ id, password }) {
  return (
    <ul id={id} className="mt-2 space-y-1">
      {PASSWORD_RULES.map((rule) => {
        const ok = rule.test(password)
        return (
          <li key={rule.id} data-rule={rule.id} data-valid={ok}
            className={`flex items-center gap-2 text-xs ${ok ? 'text-green-700' : 'text-gray-500'}`}>
            <span aria-hidden="true">{ok ? '✓' : '○'}</span>
            {rule.label}
            <span className="sr-only">{ok ? ' : respecté' : ' : non respecté'}</span>
          </li>
        )
      })}
    </ul>
  )
}