---
// Feature icon. Default: a 7x7 procedural glyph (styled by .picon in main.css).
// Optional: pass `img` (an absolute path like "/icons/foo.png|svg" under
// landing/public/) to render a custom image instead of a glyph.
interface Props {
  glyph: "shield" | "diamond" | "orb" | "heart";
  gold?: boolean;
  img?: string; // custom icon path in /public/icons/ — overrides the glyph
}
const { glyph, gold = false, img } = Astro.props;

const GLYPHS: Record<Props["glyph"], string[]> = {
  shield: ["0111110", "1111111", "1111111", "1111111", "0111110", "0011100", "0001000"],
  diamond: ["0001000", "0011100", "0111110", "1111111", "0111110", "0011100", "0001000"],
  orb: ["0011100", "0111110", "1111111", "1111111", "1111111", "0111110", "0011100"],
  heart: ["0110110", "1111111", "1111111", "1111111", "0111110", "0011100", "0001000"],
};
const cells = GLYPHS[glyph].join("").split("");
const onClass = gold ? "go" : "on";
---
{img ? (
  <img class="picon-img" src={img} alt="" aria-hidden="true" width="52" height="52" />
) : (
  <div class="picon" aria-hidden="true">
    {cells.map((c) => <i class={c === "1" ? onClass : undefined} />)}
  </div>
)}