/**
 * @file PasswordRules.tsx
 * @description The checklist under a "new password" field the account picks
 * for itself (Settings → Account, the first-login password change, an admin's
 * own password on the Users page): each rule of `lib/passwordRules.ts`, ticked
 * as the password typed passes it.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useTranslation } from "react-i18next";
import { Check, Circle } from "lucide-react";
import { PASSWORD_MIN_LENGTH, PASSWORD_RULES, passwordProblems } from "../../lib/passwordRules";

export function PasswordRules({ password, username }: { password: string; username?: string }) {
  const { t } = useTranslation("users");
  const failed = new Set(passwordProblems(password, username));
  return (
    <ul className="grid gap-x-4 gap-y-1 text-xs sm:grid-cols-2" data-testid="password-rules">
      {PASSWORD_RULES.map((rule) => {
        const ok = password.length > 0 && !failed.has(rule);
        return (
          <li
            key={rule}
            className={`flex items-center gap-1.5 ${ok ? "text-status-success" : "text-fg-muted"}`}
            data-rule={rule}
            data-ok={ok}
          >
            {ok ? (
              <Check className="h-3.5 w-3.5 flex-shrink-0" />
            ) : (
              <Circle className="h-3 w-3 flex-shrink-0" />
            )}
            {t(`passwordRules.${rule}`, { min: PASSWORD_MIN_LENGTH })}
          </li>
        );
      })}
    </ul>
  );
}