@props(['eyebrow' => null, 'title', 'link' => null, 'linkText' => 'View All', 'center' => false])

<div {{ $attributes->class(['mb-8 flex flex-wrap items-end gap-4 sm:mb-10', 'justify-center text-center' => $center, 'justify-between' => !$center]) }}>
    <div>
        @if ($eyebrow)
            <p class="eyebrow mb-2">{{ $eyebrow }}</p>
        @endif
        <h2 class="section-title">{{ $title }}</h2>
    </div>
    @if ($link)
        <a href="{{ $link }}" class="group inline-flex items-center gap-2 text-xs font-semibold tracking-[0.18em] text-ink-900 uppercase transition-colors hover:text-moss-600">
            {{ $linkText }}
            <x-icon name="arrow-right" class="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
        </a>
    @endif
</div>