import { Check, X } from "lucide-react";

import { passwordRequirements } from "@/utils/passwordSchema";

export interface PasswordChecklistProps {
  /** The current password value; the checklist hides itself when empty. */
  value: string;
}

/** Live pass/fail list of the password rules, shown under a password field. */
export default function PasswordChecklist({ value }: PasswordChecklistProps) {
  if (!value) return null;

  return (
    <div className="mt-2 space-y-1">
      {passwordRequirements.map((req) => {
        const met = req.test(value);
        return (
          <div key={req.label} className="flex items-center gap-2">
            <span
              className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
                met
                  ? "bg-primary text-primary-foreground"
                  : "bg-gray-200 text-gray-500"
              }`}
            >
              {met ? (
                <Check className="h-2.5 w-2.5" />
              ) : (
                <X className="h-2.5 w-2.5" />
              )}
            </span>
            <span className={`text-xs ${met ? "text-primary" : "text-gray-500"}`}>
              {req.label}
            </span>
          </div>
        );
      })}
    </div>
  );
}
