@props([
'href' => '#',
'variant' => 'default',
'class' => '',
'animated' => true,
])

@php
$baseClasses = 'cursor-pointer group/button-link inline-flex items-center justify-center flex-nowrap h-10 px-6 rounded-full text-sm font-medium transition-all whitespace-nowrap';
$variantClasses = match ($variant) {
'outline' => 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
default => 'bg-primary text-primary-foreground hover:bg-primary/90',
};
$classes = cn($baseClasses, $variantClasses, $class);
@endphp

<a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }} @if($animated) data-animate="appear" @endif>
    <span class="flex items-center h-full">
        {{ $slot }}
        {{-- ChevronRight icon (Lucide) --}}
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-[150] ml-2 group-hover/button-link:translate-x-1">
            <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
    </span>
</a>