---
/*
  Button / link (MICRO_INTERACTIONS). Renders <a> when href is set, else <button>.
  Motion only transforms/opacity; focus ring comes from the global :focus-visible.
*/
interface Props {
  variant?: 'primary' | 'secondary' | 'ghost';
  href?: string;
  type?: 'button' | 'submit';
  id?: string;
  class?: string;
  download?: boolean;
  rel?: string;
  ariaLabel?: string;
}
const {
  variant = 'primary',
  href,
  type = 'button',
  id,
  class: cls,
  download,
  rel,
  ariaLabel,
} = Astro.props;

const base =
  'inline-flex items-center justify-center gap-2 rounded-sm px-4 py-2.5 text-body font-medium transition-[transform,background-color,filter,color] duration-[--dur-quick] ease-[--ease-out]';
const variants = {
  primary: 'bg-accent text-accent-ink font-semibold hover:-translate-y-px hover:brightness-105',
  secondary: 'border border-line-strong text-ink hover:bg-surface-1',
  ghost:
    'text-ink-muted hover:text-ink underline-offset-4 decoration-accent decoration-2 hover:underline px-2',
};
const classes = [base, variants[variant], cls];
---

{
  href ? (
    <a
      href={href}
      id={id}
      class:list={classes}
      download={download}
      rel={rel}
      aria-label={ariaLabel}
    >
      <slot />
    </a>
  ) : (
    <button type={type} id={id} class:list={classes} aria-label={ariaLabel}>
      <slot />
    </button>
  )
}
