---
interface Props {
  to: string
}

const { to } = Astro.props;
const currentPath = new URL(Astro.url).pathname.split('/')[1];
---

<a href={to} class={`/${currentPath}` === to ? 'current' : undefined}>
  <slot />
</a>

<style lang="scss">
  a {
			text-decoration: none;
			color: white;
			font-size: large;
			position: relative;

			&::after {
				font-family: monospace;
				content: ".clickable";
				transition-property: transform, opacity;
				transition-duration: 150ms;
				transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
			}

			&:not(.current) {
				&::after {
					opacity: 0;
				}

				&:hover,
				&:focus-within {
					&::after {
						opacity: 1;
					}
				}
			}

			&.current {

				&::after {
					content: '.current';
					transform: translateX(2rem);
					transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
				}
			
				&:hover::after,
				&:focus-visible::after {
					transform: translateX(1rem);
					
				}
			}
		}
</style>