---
interface Props {
  href?: string;
  variant?: 'primary' | 'ghost';
  type?: 'button' | 'submit';
  class?: string;
}
const { href, variant = 'primary', type = 'button', class: extraClass = '' } = Astro.props;

const base =
  'inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-full font-display font-semibold text-sm transition-all duration-200 cursor-pointer whitespace-nowrap';
const variants = {
  primary:
    'bg-magenta text-white hover:scale-[1.03] hover:shadow-[0_0_28px_rgba(255,45,126,0.45)] active:scale-[0.98]',
  ghost:
    'border border-hueso/30 text-hueso hover:border-magenta hover:text-magenta active:scale-[0.98]',
};
const cls = `${base} ${variants[variant]} ${extraClass}`;
---

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