---
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-primary)] text-[var(--color-primary-foreground)] shadow-[0_2px_14px_rgba(111,229,191,0.2)] hover:bg-[var(--color-mint-300)] hover:shadow-[0_4px_20px_rgba(111,229,191,0.26)] active:scale-[0.98]',
    secondary:
        'border-[color:var(--color-border)] bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] hover:border-[var(--color-border-strong)] hover:bg-[var(--surface-muted-strong)] active:scale-[0.98]',
    ghost: 'border-transparent bg-transparent text-[var(--color-muted-foreground)] hover:bg-[var(--surface-muted)] hover:text-[var(--color-foreground)]',
};

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>
    )
}