import React from "react";
export function EnamelMedallion({ monogram = "M", hue = "var(--rr-emerald)", size = 56, nascent = false, style }) {
  const s = typeof size === "number" ? size + "px" : size;
  return (
    <div style={{
      width: s, height: s, borderRadius: "50%", display: "grid", placeItems: "center", flexShrink: 0,
      fontFamily: "var(--font-display)", fontSize: "calc(" + s + " * 0.42)",
      color: "color-mix(in srgb, " + hue + " 55%, var(--rr-cream))",
      background: "color-mix(in srgb, " + hue + " 24%, #081310)",
      border: (nascent ? "1.5px dashed " : "1.5px solid ") + "color-mix(in srgb, " + hue + " 58%, var(--rr-void))",
      boxShadow: nascent
        ? "0 0 0 2px var(--rr-void), 0 0 14px color-mix(in srgb, " + hue + " 18%, transparent)"
        : "0 0 0 2px var(--rr-void), 0 0 0 3.5px rgba(232,178,74,0.8), 0 0 0 5px var(--rr-void), 0 0 18px color-mix(in srgb, " + hue + " 24%, transparent)",
      ...style
    }}>{monogram}</div>
  );
}