---
export interface Props {
    title: string
    subtitle: string
    url: string | null
}

const { title, subtitle, url } = Astro.props

const fontSize = 'text-[.9rem]'
const fontSizeH3 = 'text-[1.4rem]'
const fontSpacing = 'leading-[1.5rem]'

const margin = 'm-[-1rem] p-[1rem]'
const background = 'bg-[#00000020]'
---

<a
    href={url}
    target="_blank"
    rel="noopener noreferrer"
    class={`block rounded ${
        url &&
        `hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
    } ${fontSize} ${margin} ${background}`}
>
    <div class={`mx-auto max-w-page-w space-y-paragraph`}>
        <span class={`flex flex-col`}>
            <h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
            {
                subtitle && (
                    <span class={`font-thin italic ${fontSpacing}`}>
                        {subtitle}
                    </span>
                )
            }
        </span>
        <slot />
    </div>
</a>