---
interface Props {
    href?: string;
    variant?: "primary" | "secondary" | "outline" | "ghost";
    size?: "sm" | "md" | "lg";
    class?: string;
}

const { 
    href, 
    variant = "primary", 
    size = "md",
    class: className = "" 
} = Astro.props;

const Tag = href ? "a" : "button";

const baseStyles = "inline-flex items-center justify-center gap-3 font-bold uppercase tracking-[0.3em] text-[10px] transition-all duration-500 rounded-full text-center hover:-translate-y-0.5";

const variants = {
    primary: "bg-brand-green text-white hover:bg-brand-green-moody shadow-lg hover:shadow-brand-green/20",
    secondary: "bg-brand-dark text-white hover:bg-black shadow-lg",
    outline: "bg-transparent border border-brand-dark/20 text-brand-dark hover:border-brand-dark hover:bg-brand-dark hover:text-white",
    ghost: "bg-brand-cream text-brand-green hover:bg-white shadow-xl hover:shadow-white/20",
};

const sizes = {
    sm: "px-6 py-3",
    md: "px-10 py-5",
    lg: "px-12 py-6 text-[11px]",
};
---

<Tag 
    href={href}
    class:list={[baseStyles, variants[variant], sizes[size], className]}
>
    <slot />
</Tag>

