---
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-all duration-200 cursor-pointer';

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

const variantClasses = {
    primary:
        'border-transparent bg-[var(--color-ink-900)] text-white shadow-[0_2px_8px_rgba(0,0,0,0.12)] hover:bg-[var(--color-ink-800)] hover:shadow-[0_4px_16px_rgba(0,0,0,0.18)] active:scale-[0.98]',
    secondary:
        'border-[color:var(--color-border)] bg-white text-[var(--color-secondary-foreground)] hover:border-[var(--color-border-strong)] hover:bg-[var(--surface-muted)] active:scale-[0.98]',
    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>
    )
}
