---
import type { ButtonVariant } from '@/types/site';

interface Props {
    ariaLabel?: string;
    class?: string;
    href?: string;
    rel?: string;
    size?: 'lg' | 'md' | 'sm';
    target?: '_blank' | '_self';
    type?: 'button' | 'reset' | 'submit';
    variant?: ButtonVariant;
}

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

const baseClass =
    'inline-flex items-center justify-center rounded-[var(--radius-pill)] border font-semibold tracking-[var(--tracking-tight)] transition duration-150';

const sizeClasses = {
    sm: 'min-h-10 px-4 text-sm',
    md: 'min-h-11 px-5 text-sm sm:text-[0.95rem]',
    lg: 'min-h-12 px-6 text-[0.97rem]',
};

const variantClasses = {
    primary:
        'border-transparent bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--shadow-inline)] hover:bg-[var(--color-brand-700)]',
    secondary:
        'border-[color:var(--color-border)] bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] hover:border-[var(--color-border-strong)] hover:bg-white',
    ghost: 'border-transparent bg-transparent text-[var(--color-ink-800)] hover:bg-white/70',
};

const classes = [baseClass, sizeClasses[size], variantClasses[variant], className];
---

{
    href ? (
        <a
            href={href}
            target={target}
            rel={rel}
            aria-label={ariaLabel}
            class:list={classes}
            data-button-variant={variant}
            data-cta-weight={variant}
            data-interaction="button"
        >
            <slot />
        </a>
    ) : (
        <button
            type={type}
            aria-label={ariaLabel}
            class:list={classes}
            data-button-variant={variant}
            data-cta-weight={variant}
            data-interaction="button"
        >
            <slot />
        </button>
    )
}