/** RPG 金框圖示外框（與金幣貓頭鷹立繪同系，支援 HD-2D 插畫） */
import type { ReactNode } from "react";

export default function RpgIcon({
  size = 24,
  src,
  children,
  className,
  glow,
  variant = "default",
}: {
  size?: number;
  /** HD-2D 插畫路徑（優先於 children） */
  src?: string;
  children?: ReactNode;
  className?: string;
  glow?: boolean;
  variant?: "default" | "hero" | "nav";
}) {
  const pad = variant === "hero" ? 12 : variant === "nav" ? 8 : 10;
  const frame = size + pad;

  return (
    <span
      className={[
        "rpg-icon",
        `rpg-icon--${variant}`,
        glow ? "rpg-icon--glow" : "",
        src ? "rpg-icon--art" : "",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      style={{ width: frame, height: frame }}
      aria-hidden
    >
      <svg viewBox="0 0 72 72" width={frame} height={frame} className="rpg-icon-svg">
        <defs>
          <radialGradient id="rpgIconGlow" cx="50%" cy="35%" r="58%">
            <stop offset="0%" stopColor="rgba(248,230,168,.5)" />
            <stop offset="100%" stopColor="rgba(10,13,24,0)" />
          </radialGradient>
          <linearGradient id="rpgIconBevel" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="rgba(255,255,255,.12)" />
            <stop offset="100%" stopColor="rgba(0,0,0,.25)" />
          </linearGradient>
          <clipPath id="rpgIconClip">
            <rect x="11" y="10" width="50" height="50" rx="6" />
          </clipPath>
        </defs>
        {glow && <circle cx="36" cy="32" r="30" fill="url(#rpgIconGlow)" />}
        <rect x="4" y="4" width="64" height="64" rx="8" fill="#0e1224" stroke="#e7c66b" strokeWidth="3" />
        <rect x="8" y="7" width="56" height="56" rx="6" fill="#12172e" stroke="rgba(231,198,107,.35)" strokeWidth="2" />
        <rect x="11" y="10" width="50" height="50" rx="6" fill="url(#rpgIconBevel)" opacity=".35" />
        <path
          d="M8 14 L14 8 M64 14 L58 8 M8 58 L14 64 M64 58 L58 64"
          stroke="#f3dd96"
          strokeWidth="2"
          strokeLinecap="square"
        />
        {src ? (
          <image
            href={src}
            x="11"
            y="10"
            width="50"
            height="50"
            clipPath="url(#rpgIconClip)"
            preserveAspectRatio="xMidYMid slice"
            className="rpg-icon-photo"
          />
        ) : null}
        {variant === "hero" && (
          <>
            <circle className="rpg-sparkle rpg-sparkle-a" cx="14" cy="18" r="2" fill="#f8e6a8" />
            <circle className="rpg-sparkle rpg-sparkle-b" cx="60" cy="22" r="1.5" fill="#6fe0d0" />
          </>
        )}
      </svg>
      {!src && children ? (
        <span className="rpg-icon-art" style={{ width: size, height: size }}>
          {children}
        </span>
      ) : null}
    </span>
  );
}