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

interface ActionLinkProps extends HTMLAttributes<'a'> {
  href: string;
  variant?: 'default' | 'action';
  children?: string;
}

const {
  href,
  children = '',
  variant = 'default',
  class: className = '',
  ...attrs
} = Astro.props;

const baseClasses = 'font-bold relative inline-block group hover:cursor-pointer';

const variantClasses = {
  default: 'text-gray-600 hover:text-blue-700 group-hover:text-blue-700',
  action: 'text-red-600 hover:text-red-700 group-hover:text-red-700'
};

const classes = [
  baseClasses,
  variantClasses[variant as keyof typeof variantClasses],
  className
].filter(Boolean).join(' ');
---

<a href={href} class={classes} data-astro-prefetch {...attrs}>
  <span class="relative z-10">
    <slot />
    {children}
  </span>
  <span class="absolute bottom-0 left-1/2 w-0 h-0.5 bg-current group-hover:w-full group-hover:left-0 transition-all duration-300 ease-in-out"></span>
</a>