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

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

function RuleRow({ ok, children }) {
  return (
    <div
      className={cn(
        "flex items-center justify-between gap-2 text-xs",
        ok ? "dark:text-green-300 text-green-600" : "dark:text-white/70"
      )}
    >
      <span className="truncate">{children}</span>
      <span className={cn("font-black", ok ? "dark:text-green-300 text-green-600" : "dark:text-white/50")}>
        {ok ? "✓" : "✕"}
      </span>
    </div>
  );
}

export default function PasswordRulesTooltip({ open, rules, onPointerDown }) {
  if (!open) return null;

  return (
    <div
      className="absolute z-30 right-0 -top-2 -translate-y-full w-full"
      onPointerDown={onPointerDown}
    >
      <div className="relative dark:bg-[#0B1F3A] bg-[#f2f2f2] border border-white/10 rounded-lg p-3 shadow-xl">
        <div className="absolute right-8 -bottom-2 w-4 h-4 dark:bg-[#0B1F3A] bg-[#f2f2f2] border-r border-b border-white/10 rotate-45" />
        <div className="text-xs font-semibold dark:text-white/90 mb-2">
          شرایط رمز عبور
        </div>

        <div className="grid gap-1">
          <RuleRow ok={rules.minLen}>حداقل ۸ کاراکتر</RuleRow>
          <RuleRow ok={rules.upper}>حداقل ۱ حرف بزرگ (A-Z)</RuleRow>
          <RuleRow ok={rules.symbol}>حداقل ۱ علامت (!@#...)</RuleRow>
        </div>
      </div>
    </div>
  );
}
