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

const BAR_COLORS = [
  "bg-red-500", // Very Weak
  "bg-orange-500", // Weak
  "bg-yellow-500", // Fair
  "bg-lime-500", // Good
  "bg-green-500", // Strong
  "bg-green-700", // Very Strong
];

export function PasswordStrengthMeter({ password }: { password: string }) {
  if (!password) return null;

  const { score, label } = calculatePasswordStrength(password);
  const percent = ((score + 1) / BAR_COLORS.length) * 100;

  return (
    <div className="mt-2">
      <div className="h-1.5 w-full overflow-hidden rounded-full bg-kolabora-neutral-dark/10">
        <div
          className={`h-full rounded-full transition-[width,background-color] duration-300 ${BAR_COLORS[score]}`}
          style={{ width: `${percent}%` }}
        />
      </div>
      <p aria-live="polite" className="mt-1 text-xs font-medium text-kolabora-neutral-dark/70">
        {label}
      </p>
    </div>
  );
}