---
import icons from "@cdransf/astro-tabler-icons";

const {
  IconArticle,
  IconHeadphones,
  IconDeviceTvOld,
  IconBooks,
  IconLink,
  IconInfoCircle,
  IconSearch,
  IconRss,
  IconBrandMastodon,
  IconMail,
  IconBrandGithub,
  IconBrandNpm,
  IconCoffee,
  IconDeviceWatch,
  IconHeartHandshake,
} = icons;
const { icon, className } = Astro.props;
const iconComponents = {
  article: IconArticle,
  headphones: IconHeadphones,
  "device-tv-old": IconDeviceTvOld,
  books: IconBooks,
  link: IconLink,
  "info-circle": IconInfoCircle,
  search: IconSearch,
  rss: IconRss,
  "brand-mastodon": IconBrandMastodon,
  mail: IconMail,
  "brand-github": IconBrandGithub,
  "brand-npm": IconBrandNpm,
  coffee: IconCoffee,
  "device-watch": IconDeviceWatch,
  "heart-handshake": IconHeartHandshake,
};
const SelectedIcon = iconComponents[icon?.toLowerCase()] || null;
---

{SelectedIcon ? <div set:html={SelectedIcon({ size: 24, className })} /> : null}