---
import type { HTMLAttributes } from 'astro/types';
import { Icon } from 'astro-icon/components';

type Variant = 'primary' | 'secondary' | 'link';

export interface Props extends HTMLAttributes<'a'> {
  href?: string;
  variant?: Variant;
  icon?: string;
  type?: 'button' | 'submit';
}

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

// Primary uses ink on red at ≥19px bold (large text, ratio 4.46 ≥ 3).
const variants: Record<Variant, string> = {
  primary:
    'bg-accent text-on-accent px-6 py-3 text-[1.1875rem] font-bold rounded-[2px] hover:bg-fg hover:text-bg',
  secondary:
    'bg-fg text-bg px-6 py-3 text-[1.1875rem] font-bold rounded-[2px] hover:bg-accent hover:text-on-accent',
  link: 'link-strong text-lg',
};
const classes = [
  'font-display inline-flex items-center gap-2 transition-colors',
  variants[variant],
  className,
];
---

{href ? (
  <a href={href} class:list={classes} {...rest}>
    <slot />
    {icon && <Icon name={icon} class="size-5" aria-hidden="true" />}
  </a>
) : (
  <button type={type} class:list={[classes, 'cursor-pointer']}>
    <slot />
    {icon && <Icon name={icon} class="size-5" aria-hidden="true" />}
  </button>
)}