---
import type { IconType } from "react-icons";

interface Props {
  links: Record<string, [string, IconType[], string]>;
}

const { links } = Astro.props;
---

<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {
    Object.entries(links).map((link) => {
      return (
        <a
          href={link[1][0]}
          class="flex flex-col btn preset-filled-primary-100-900 rounded-xl p-0 overflow-hidden border border-primary-500"
        >
          <div class="relative bg-primary-500 p-4 flex gap-4 justify-center rounded-t-xl w-full">
            {link[1][1].map((icon) => {
              const Icon = icon;
              return <Icon />;
            })}
            <p class="chip preset-tonal-warning text-warning-700-300 absolute right-2 uppercase font-bold">
              {link[1][2]}
            </p>
          </div>
          <p class="p-4">{link[0]}</p>
        </a>
      );
    })
  }
</div>