---
type Variant = 'primary' | 'secondary' | 'ghost' | 'inverse';
type Size = 'sm' | 'md' | 'lg';

interface Props {
  variant?: Variant;
  size?: Size;
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  class?: string;
  ariaLabel?: string;
  disabled?: boolean;
  id?: string;
}

const {
  variant = 'primary',
  size = 'md',
  href,
  type = 'button',
  class: className = '',
  ariaLabel,
  disabled,
  id,
} = Astro.props;

const base =
  'inline-flex items-center justify-center gap-2 font-label-md rounded-md transition-all duration-200 select-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]';

const sizes: Record = {
  sm: 'h-9 px-4 text-[13px]',
  md: 'h-10 px-5 text-sm',
  lg: 'h-12 px-7 text-label-md',
};

const variants: Record = {
  primary: 'bg-primary text-white hover:brightness-110',
  secondary: 'bg-white text-on-surface border border-border-subtle hover:border-primary',
  ghost: 'text-primary hover:bg-primary/5',
  inverse: 'bg-inverse-surface text-white hover:bg-primary',
};

const cls = [base, sizes[size], variants[variant], className].filter(Boolean).join(' ');
---

{
  href ? (
    <a href={href} class={cls} aria-label={ariaLabel} id={id}>
      <slot />
    </a>
  ) : (
    <button type={type} class={cls} aria-label={ariaLabel} disabled={disabled} id={id}>
      <slot />
    </button>
  )
}