---
import type { SvgComponent } from "astro/types";
import { Image } from "astro:assets";
export interface Props {
    name: string;
    url: string;
    icon: ImageMetadata & SvgComponent;
    status: "active" | "wip" | "disabled";
}

const { name, url, icon } = Astro.props as Props;
---

<div
    class="bg-ctp-surface2 pb-1 rounded-full cursor-pointer transition-all duration-75 hover:pb-0.5 hover:pt-0.5 active:pb-0 active:pt-1 active:bg-ctp-surface1 has-tooltip"
>
    <a href={url} target="_blank">
        <div
            class="flex items-center rounded-full w-72 p-3 bg-ctp-blue text-ctp-mantle"
        >
            <Image
                width={24}
                height={24}
                src={icon}
                alt={name + " logo/icon"}
                priority
            />
            <p class="w-full text-center mr-10 text-lg font-semibold">
                {name}
            </p>
        </div>
    </a>
</div>