---
const { href, variant = "primary", className } = Astro.props;
let classes = ''
if (variant === "primary") {
classes += ""
} else if (variant === "text") {
classes += "flex items-center gap-2 text-black dark:text-white no-underline "
} else {
classes += ""
}
---
<a href={href} class={` ${classes} ${className}`}>
<slot />
<svg
class="mt-0!"
width="9"
height="16"
viewBox="0 0 9 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="link-arrow"
>
<path
d="M1 15L8 8L1 1"
class="stroke-black dark:stroke-white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
</a>
<style>
.link-arrow {
transition: transform 0.3s ease;
}
a:hover .link-arrow {
transform: translateX(4px);
}
</style>