@props([
    'href' => '#',
    'label' => null, // defaults to the translated "See All"
    'tone' => 'light', // light (on white/light bg) | dark (on green bg)
])

{{--
    Standard "See all" button for section footers.
    Usage: <x-see-all :href="route('gallery')" tone="dark" class="mt-8" />
--}}
<a href="{{ $href }}"
    {{ $attributes->class([
        'btn group inline-flex rounded-full border-2 pl-6 pr-2 gap-3 font-semibold transition-colors',
        'border-primary text-primary hover:bg-primary hover:text-white' => $tone === 'light',
        'border-white/70 text-white hover:bg-white hover:text-primary' => $tone === 'dark',
    ]) }}>
    {{ $label ?? __('homepage.see_all') }}
    <span
        class="w-8 h-8 rounded-full flex items-center justify-center transition-transform duration-300 group-hover:translate-x-1 {{ $tone === 'dark' ? 'bg-white text-primary group-hover:bg-primary group-hover:text-white' : 'bg-primary text-white group-hover:bg-white group-hover:text-primary' }}">
        <i class="fa-solid fa-arrow-right text-xs" aria-hidden="true"></i>
    </span>
</a>