---
import Icon from '@components/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-full px-4 py-3 text-center text-sm font-medium text-neutral-700 ring-zinc-500 focus-visible:ring transition duration-300 outline-none'
const borderClasses = 'border border-transparent'
const bgColorClasses = 'bg-yellow-400 dark:focus:outline-none'
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>
