import { ImageResponse } from "next/og";

// Suit shapes drawn as SVG paths (viewBox 0 0 100 100) so they render
// regardless of the available fonts.
const SPADE =
  "M50 8 C50 8 20 33 20 55 C20 67 28 73 37 73 C42 73 47 70 49 65 C49 73 47 82 38 88 L38 92 L62 92 L62 88 C53 82 51 73 51 65 C53 70 58 73 63 73 C72 73 80 67 80 55 C80 33 50 8 50 8 Z";
const HEART =
  "M50 86 C50 86 14 60 14 35 C14 22 24 14 34 14 C42 14 47 19 50 25 C53 19 58 14 66 14 C76 14 86 22 86 35 C86 60 50 86 50 86 Z";

function Card({
  size,
  path,
  color,
  rotate,
  shift,
}: {
  size: number;
  path: string;
  color: string;
  rotate: number;
  shift: number;
}) {
  const w = Math.round(size * 0.44);
  const h = Math.round(size * 0.6);
  const suit = Math.round(w * 0.6);
  return (
    <div
      style={{
        position: "absolute",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: w,
        height: h,
        background: "#ffffff",
        borderRadius: Math.round(size * 0.09),
        border: `${Math.max(2, Math.round(size * 0.014))}px solid rgba(15,23,42,0.12)`,
        transform: `translateX(${shift}px) rotate(${rotate}deg)`,
        boxShadow: "0 8px 24px rgba(0,0,0,0.45)",
      }}
    >
      <svg width={suit} height={suit} viewBox="0 0 100 100">
        <path d={path} fill={color} />
      </svg>
    </div>
  );
}

export function renderIcon(size: number) {
  const shift = Math.round(size * 0.13);
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          background:
            "radial-gradient(125% 125% at 50% 8%, #14533c 0%, #0a0f0d 78%)",
        }}
      >
        <Card size={size} path={SPADE} color="#1f2937" rotate={-13} shift={-shift} />
        <Card size={size} path={HEART} color="#dc2626" rotate={13} shift={shift} />
      </div>
    ),
    { width: size, height: size },
  );
}