/* global React, IRONMAN_DATA */
const { useState, useEffect, useRef } = React;

// ============= SHARED HELPERS =============

function Placeholder({ kind, label, note, ratio, className = "" }) {
  const ratioMap = { "16:9": "56.25%", "4:3": "75%", "1:1": "100%" };
  const padTop = ratio ? ratioMap[ratio] : null;
  return (
    <div className={`placeholder ${className}`} style={padTop ? { paddingTop: padTop, height: 0, position: "relative" } : undefined}>
      <div className="ph-inner" style={padTop ? { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" } : undefined}>
        {kind && <div className="ph-kind">{kind}</div>}
        <div className="ph-label">{label}</div>
        {note && <div className="ph-note">{note}</div>}
      </div>
    </div>
  );
}

function Copyable({ text, children }) {
  const [copied, setCopied] = useState(false);
  const copy = (e) => {
    e.stopPropagation();
    navigator.clipboard?.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1200);
    });
  };
  return (
    <span onClick={copy} style={{ cursor: "pointer" }} title="Click to copy">
      {children}
      <span className="copy">{copied ? "✓ copied" : "copy"}</span>
    </span>
  );
}

window.Placeholder = Placeholder;
window.Copyable = Copyable;