{% props href = null, variant = 'secondary', size = 'md', rounded = 'md', disabled = false %}
{% set btn = cva({
    base: 'inline-flex items-center justify-center font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors',
    variants: {
        variant: {
            primary:     'bg-primary-600 text-white shadow-sm hover:bg-primary-500 focus-visible:outline-primary-600',
            secondary:   'bg-white text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:hover:bg-white/10',
            destructive: 'bg-red-600 text-white shadow-sm hover:bg-red-500 focus-visible:outline-red-600',
            ghost:       'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800',
            link:        'text-primary-600 hover:bg-primary-50 focus:outline-none dark:text-primary-400 dark:hover:bg-primary-900/30',
        },
        size: {
            xs: 'px-2 py-1 text-sm',
            sm: 'px-3 py-1.5 text-sm',
            md: 'px-3 py-2 text-sm',
            lg: 'px-4 py-2 text-sm',
            xl: 'px-4 py-3 text-[15px]',
        },
        rounded: {
            md: 'rounded-md',
            xl: 'rounded-xl',
        },
    },
    defaultVariants: { variant: 'secondary', size: 'md', rounded: 'md' },
}) %}

{% set baseClasses = btn.apply({variant, size}) ~ (disabled ? ' pointer-events-none opacity-50 cursor-not-allowed' : '') %}
{% set classes = [baseClasses, attributes.all.class|default('')]|join(' ')|tailwind_merge %}
{% set inner %}{% block content %}{% endblock %}{% endset %}

{% if href %}
    <a href="{{ href }}" {{ attributes.without('class').defaults({class: classes}) }}>{{ inner|raw }}</a>
{% else %}
    <button {{ attributes.without('class').defaults({class: classes, type: 'button', disabled: disabled}) }}>{{ inner|raw }}</button>
{% endif %}
