@props([
    'tag'      => 'button',
    'href'     => null,
    'type'     => 'button',
    'size'     => 'lg',
    'position' => 'relative',
])

@php
    $tag = $href ? 'a' : $tag;

    $sizeClasses = match($size) {
        'sm'    => 'py-2 px-6 text-sm',
        'md'    => 'py-3.5 px-6 text-base',
        default => 'py-5 px-[46px] text-[19px]',
    };

    // $position defaults to 'relative' (needed so the ::before/::after layers
    // in .btn-primary position against the button itself), but callers that
    // need to place the button absolutely (e.g. a hover-reveal CTA over a
    // product image) must pass position="absolute" here rather than adding
    // "absolute" via the class prop — Tailwind's generated stylesheet always
    // orders the "relative" utility after "absolute", so on a class clash
    // "relative" silently wins and the button never actually gets positioned.
    $class = 'btn-primary '.$position.' isolate inline-flex items-center justify-center border border-black font-display font-bold italic text-black cursor-pointer no-underline uppercase ' . $sizeClasses;

    $attrs = $href
        ? $attributes->merge(['href' => $href, 'class' => $class])
        : $attributes->merge(['type' => $type, 'class' => $class]);
@endphp

<{{ $tag }} {{ $attrs }}>
    <span class="relative z-[1]">{{ $slot }}</span>
</{{ $tag }}>