---
interface Props {
  variant?: 'primary' | 'secondary';
  href?: string;
  class?: string;
}

const { variant = 'primary', href, class: className = '' } = Astro.props;

const baseClasses = 'inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.2em] px-6 py-3 rounded-full transition-all duration-300';

const variantClasses = {
  primary: 'bg-transparent border border-text text-text hover:bg-accent hover:border-accent hover:text-text',
  secondary: 'bg-text text-white hover:bg-accent hover:text-text border border-text hover:border-accent'
};

const classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
---

{href ? (
  <a href={href} class={classes}>
    <slot />
  </a>
) : (
  <button class={classes}>
    <slot />
  </button>
)}