// src/components/auth/PasswordStrengthBar.jsx
import React from "react";

function cn(...a) {
  return a.filter(Boolean).join(" ");
}

export default function PasswordStrengthBar({ strength }) {
  return (
    <div className="mt-3">
      <div className="flex items-center justify-between text-xs dark:text-white/80">
        <span>قدرت رمز عبور</span>
        <span
          className={cn(
            "font-bold",
            strength.level === 1 && "dark:text-red-300 text-red-600",
            strength.level === 2 && "dark:text-yellow-200 text-yellow-600",
            strength.level === 3 && "dark:text-green-200 text-green-600"
          )}
        >
          {strength.label}
        </span>
      </div>

      <div className="mt-2 h-2 w-full rounded-full dark:bg-white/15 bg-black/5 overflow-hidden">
        <div
          className={cn(
            "h-full transition-all",
            strength.level === 1 && "bg-red-400",
            strength.level === 2 && "bg-yellow-300",
            strength.level === 3 && "bg-green-400",
            strength.level === 0 && "bg-white/10"
          )}
          style={{ width: `${strength.percent}%` }}
        />
      </div>
    </div>
  );
}
