/* =====================================================================
   MODULES — shared reusable components
===================================================================== */

const { useState: useSt, useContext: useCtx } = React;

function ViralDots({ score, max = 5 }) {
  return (
    <span className="viral-dots" title={"Viral potential: " + score + "/" + max}>
      {Array.from({ length: max }).map((_, i) => (
        <span key={i} className={"viral-dot" + (i < score ? " is-on" : "")} />
      ))}
    </span>
  );
}

function DiffBadge({ level }) {
  const cls = { Easy: "diff-easy", Medium: "diff-med", Hard: "diff-hard" }[level] || "diff-easy";
  return <span className={"diff-badge " + cls}>{level}</span>;
}

function CopyBtn({ text, className }) {
  const [copied, setCopied] = useSt(false);
  const copy = (e) => {
    e.stopPropagation();
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }).catch(() => {
      const ta = document.createElement("textarea");
      ta.value = text;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };
  return (
    <button onClick={copy} className={"copy-btn " + (className || "")}>
      {copied ? "✓ Copied!" : "Copy"}
    </button>
  );
}

Object.assign(window, { ViralDots, DiffBadge, CopyBtn });