import React from "react";
import { LuCopy, LuEye, LuEyeOff, LuKeyRound } from "react-icons/lu";

export default function FtpPasswordCard({
  hasPassword,
  showPassword,
  password,
  resetting,
  onToggleShow,
  onRequestReset,
  onCopy,
}) {
  const masked = "••••••••••••••••";

  return (
    <div className="p-3 shadow rounded-xl bg-[#f2f2f2] dark:bg-[#001F3F] border border-white/10 flex items-center justify-between gap-3">
      <div className="min-w-0">
        <div className="text-xs opacity-70 flex items-center gap-2">
          <span>Password</span>

          {!hasPassword ? (
            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-white/10 bg-white/5 text-[10px] opacity-80">
              <LuKeyRound className="w-3 h-3" />
              نیاز به درخواست
            </span>
          ) : null}
        </div>

        <div className="text-sm break-all">
          {hasPassword ? (showPassword ? password : masked) : "نمایش داده نمی‌شود"}
        </div>
      </div>

      <div className="flex items-center gap-1">
        {hasPassword ? (
          <>
            <button
              type="button"
              onClick={onToggleShow}
              className="p-2 shadow rounded-xl hover:bg-white/10"
              title={showPassword ? "Hide" : "Show"}
            >
              {showPassword ? <LuEyeOff className="w-4 h-4" /> : <LuEye className="w-4 h-4" />}
            </button>

            <button
              type="button"
              onClick={onCopy}
              className="p-2 shadow rounded-xl hover:bg-white/10"
              title="Copy Password"
            >
              <LuCopy className="w-4 h-4" />
            </button>
          </>
        ) : (
          <button
            type="button"
            onClick={onRequestReset}
            disabled={resetting}
            className="px-3 py-2 shadow rounded-xl hover:bg-white/10 border border-white/10 text-xs flex items-center gap-2 disabled:opacity-60"
            title="دریافت/ریست پسورد"
          >
            <LuKeyRound className="w-4 h-4" />
            {resetting ? "..." : "دریافت"}
          </button>
        )}
      </div>
    </div>
  );
}
