---
import grass from "/src/svg/energy/grass.svg?raw";
import fairy from "/src/svg/energy/fairy.svg?raw";
import darkness from "/src/svg/energy/dark.svg?raw";
import dragon from "/src/svg/energy/dragon.svg?raw";
import fire from "/src/svg/energy/fire.svg?raw";
import water from "/src/svg/energy/water.svg?raw";
import electric from "/src/svg/energy/electric.svg?raw";
import steel from "/src/svg/energy/steel.svg?raw";
import colorless from "/src/svg/energy/colorless.svg?raw";
import fighting from "/src/svg/energy/fighting.svg?raw";
import psychic from "/src/svg/energy/psychic.svg?raw";

const { energy } = Astro.props;

const energyMap = {
  "Grass": grass,
  "Fairy": fairy,
  "Darkness": darkness,
  "Dragon": dragon,
  "Fire": fire,
  "Water": water,
  "Steel": steel,
  "Metal": steel,
  "Colorless": colorless,
  "Fighting": fighting,
  "Psychic": psychic,
  "Electric": electric,
  "Lightning": electric,
};

const svg = energyMap[energy as keyof typeof energyMap] ?? "";
if (!svg && energy) console.warn(`No energy icon found for: ${energy}`);
---

<div class="energy-icon shadow-filter" role="img" aria-label={energy} set:html={svg}></div>