@props(['eyebrow' => null, 'title', 'viewAllRoute' => null, 'viewAllParams' => []])

<div class="mb-8 flex items-end justify-between" data-reveal-self>
    <div>
        @if ($eyebrow)
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-champagne-light">{{ $eyebrow }}</p>
        @endif
        <h2 class="mt-1 font-display text-2xl text-ink sm:text-3xl">{{ $title }}</h2>
    </div>
    @if ($viewAllRoute && Route::has($viewAllRoute))
        <a href="{{ route($viewAllRoute, $viewAllParams) }}" class="group whitespace-nowrap text-sm font-medium text-ink/60 transition-colors duration-200 hover:text-champagne-light">
            View All <x-icon name="arrow-right" class="ml-1 inline h-3 w-3 transition-transform duration-300 group-hover:translate-x-1" />
        </a>
    @endif
</div>
