---
import common from "/src/svg/rarity/common.svg?raw";
import uncommon from "/src/svg/rarity/uncommon.svg?raw";
import rare from "/src/svg/rarity/rare.svg?raw";
import rareHolo from "/src/svg/rarity/rare_holo.svg?raw";
import amazingRare from "/src/svg/rarity/amazing_rare.svg?raw";
import illustrationRare from "/src/svg/rarity/illustration_rare.svg?raw";
import megaAttackRare from "/src/svg/rarity/mega_attack_rare.svg?raw";
import megaHyperRare from "/src/svg/rarity/mega_hyper_rare.svg?raw";
import doubleRare from "/src/svg/rarity/double_rare.svg?raw";
import promo from "/src/svg/rarity/promo.svg?raw";
import specialIllusRare from "/src/svg/rarity/special_illustration_rare.svg?raw";
import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
import secretrare from "/src/svg/rarity/rare_secret.svg?raw";
import blackwhiterare from "/src/svg/rarity/black_white_rare.svg?raw";
import raresecret from "/src/svg/rarity/rare_secret.svg?raw";

const { rarity } = Astro.props;

const rarityMap = {
  "Common": common,
  "Uncommon": uncommon,
  "Rare": rare,
  "Holo Rare": rareHolo,
  "Amazing Rare": amazingRare,
  "Illustration Rare": illustrationRare,
  "Mega Attack Rare": megaAttackRare,
  "Mega Hyper Rare": megaHyperRare,
  "Double Rare": doubleRare,
  "Promo": promo,
  "Special Illustration Rare": specialIllusRare,
  "Ultra Rare": ultrarare,
  "Secret Rare": secretrare,
  "Black White Rare": blackwhiterare,
  "Shiny Holo Rare": raresecret,
};

const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
---

<div class="rarity-icon" set:html={svg}></div>