import React from "react";
const SUITS = { clubs: "♣", spades: "♠", hearts: "♥", diamonds: "♦" };
export function PokerCard({ rank = "A", suit = "spades", faceDown = false, width = 110, style }) {
  const glyph = SUITS[suit] || suit;
  const red = suit === "hearts" || suit === "diamonds";
  const pip = red ? "var(--rr-garnet)" : "#12211d";
  const w = typeof width === "number" ? width + "px" : width;
  const base = {
    width: w, aspectRatio: "5 / 7", borderRadius: "12%", position: "relative",
    fontFamily: "var(--font-display)", boxShadow: "var(--shadow-md)", flexShrink: 0, ...style
  };
  if (faceDown) {
    return (
      <div style={{ ...base, background: "radial-gradient(ellipse at 50% 38%, #12594a 0%, #0a2f26 62%, #07110f 100%)", border: "1px solid rgba(232,178,74,0.5)", display: "grid", placeItems: "center" }}>
        <div style={{ position: "absolute", inset: "7%", border: "1px solid rgba(232,178,74,0.4)", borderRadius: "8%" }}></div>
        <img src={new URL("../../assets/sigil.png", document.currentScript?.src || window.RR_SIGIL_BASE || location.href).href} alt="" style={{ width: "52%" }} onError={(e) => { e.currentTarget.style.display = "none"; }} />
      </div>
    );
  }
  const corner = (flip) => (
    <div style={{ position: "absolute", top: "5%", left: "6%", textAlign: "center", lineHeight: 1.05, color: pip, transform: flip ? "rotate(180deg)" : "none", ...(flip ? { top: "auto", left: "auto", bottom: "5%", right: "6%" } : {}) }}>
      <div style={{ fontSize: "0.19em" }}>{rank}</div>
      <div style={{ fontSize: "0.16em" }}>{glyph}</div>
    </div>
  );
  return (
    <div style={{ ...base, background: "linear-gradient(170deg, #fdf6dd 0%, var(--rr-cream) 60%, #ead9ab 100%)", border: "1px solid rgba(138,100,32,0.55)", fontSize: w }}>
      <div style={{ position: "absolute", inset: "4.5%", border: "1px solid rgba(138,100,32,0.28)", borderRadius: "9%" }}></div>
      {corner(false)}{corner(true)}
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", color: pip, fontSize: "0.42em" }}>{glyph}</div>
    </div>
  );
}