---
import Icon from "@components/ui/icons/Icon.astro";
const { title, url } = Astro.props;

interface Props {
  title?: string;
  url?: string;
}

const baseClasses =
  "group inline-flex items-center justify-center gap-x-3 rounded-lg px-4 py-3 text-center text-sm font-medium text-neutral-700 ring-zinc-500 focus-visible:ring-3 transition duration-300 outline-hidden";
const borderClasses = "border border-transparent";
const bgColorClasses = "bg-yellow-400 dark:focus:outline-hidden";
const hoverClasses = "hover:shadow-2xl hover:shadow-yellow-500";
const fontSizeClasses = "2xl:text-base";
const ringClasses = "dark:ring-zinc-200";
---

<a
  class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${ringClasses}`}
  href={url}
  target="_blank"
  rel="noopener noreferrer"
>
  <Icon name="github" />
  {title}
</a>