---
import type { HTMLAttributes } from 'astro/types'

type Props = HTMLAttributes<'a'>

const { href, class: className, ...props } = Astro.props

const { pathname } = Astro.url
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
---

<a href={href} class:list={[className, { active: isActive }]} {...props}>
    <slot />
</a>
<style>
    a {
        display: inline-block;
        text-decoration: none;
    }
    a.active {
        font-weight: bolder;
        text-decoration: underline;
    }
</style>
