import { validatePassword } from "@/lib/password-validation";

export function PasswordRequirementsChecklist({ password, id }: { password: string; id?: string }) {
  const requirements = validatePassword(password);

  return (
    <ul id={id} aria-live="polite" className="mt-2 flex flex-col gap-1">
      {requirements.map((requirement) => (
        <li
          key={requirement.id}
          className={`flex items-center gap-2 text-sm transition-colors duration-200 ${
            requirement.met ? "text-green-600" : "text-kolabora-neutral-dark/50"
          }`}
        >
          <span
            aria-hidden="true"
            className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border transition-colors duration-200 ${
              requirement.met ? "border-green-600 bg-green-600 text-white" : "border-kolabora-neutral-dark/30"
            }`}
          >
            {requirement.met && (
              <svg viewBox="0 0 12 12" fill="none" className="h-2.5 w-2.5">
                <path
                  d="M2 6l2.5 2.5L10 3"
                  stroke="currentColor"
                  strokeWidth={1.75}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            )}
          </span>
          {requirement.label}
          <span className="sr-only">{requirement.met ? " — met" : " — not yet met"}</span>
        </li>
      ))}
    </ul>
  );
}