---
import { Icon } from 'astro-icon/components'
export interface Props {
    link: string
    icon?: string
    external?: boolean
}
const { link, icon, external } = Astro.props

const buttonPaddingX = 'md:px-[.75rem] px-[.5rem]'
const buttonPaddingY = 'py-[.5rem]'
---

<a
    href={link}
    target={external ? '_blank' : '_self'}
    rel={external ? 'noopener noreferrer' : ''}
    class={`rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`}
>
    {icon && <Icon name={icon} />}
    <slot />
</a>