---
import type { HTMLAttributes } from 'astro/types';
import NotchedBox from './NotchedBox.astro';

type Props = HTMLAttributes<'a'>;

const { href, class: className, ...props } = Astro.props;
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
const subpath = pathname.match(/[^\/]+/g);
const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
---

<a href={href} class:list={[className, { active: isActive }]} {...props}>
  <NotchedBox fillNotches={ isActive ? "right" : "none" }>
    <slot />
  </NotchedBox>
</a>
<style>
	a {
		display: inline-block;
		text-decoration: none;
    color: var(--color-light-text);
    font-size: var(--font-size-lg);
	}

  a.hover {
    color: var(--color-gold);
  }

	a.active {
		font-weight: bolder;
		text-decoration: underline;
	}
</style>
