---
const { href, variant = "primary" } = Astro.props;

const base =
  "inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-medium transition";
const variants = {
  primary: "bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400",
  secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100"
};
const classes = `${base} ${variants[variant] ?? variants.primary}`;
---

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