---
const { variant = "primary", title = "Botón", url = "#", class: className } = Astro.props as {
    variant?: Variant;
    title?: string;
    url?: string;
    class?: string;
};
const variants = {
    primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#22523F]/90 hover:text-[#EBE6D2] rounded-none",
    secondary: "bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none",
    light: "bg-green-100",
} as const;

type Variant = keyof typeof variants;

const styles = variants[variant];
---
    <a class={`${styles} font-bold transition block text-center ${className || ''}`} href={url} class="inline-block w-full h-full">{title}</a>