@props([
    'title',
    'subtitle' => '',
    'buttonText' => null,
    'buttonRoute' => null,
    'buttonIcon' => '+',
])

<div class="w-full">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">

        <div>
            <h1 class="text-4xl font-black text-slate-950">
                {{ $title }}
            </h1>

            @if($subtitle)
                <p class="text-slate-500 mt-2 text-lg">
                    {{ $subtitle }}
                </p>
            @endif
        </div>

        @if($buttonText && $buttonRoute)
            <a href="{{ $buttonRoute }}"
               class="inline-flex items-center justify-center gap-2
                      bg-slate-950 hover:bg-yellow-400 hover:text-slate-950
                      text-white font-black px-8 py-4 rounded-2xl
                      shadow-xl transition-all duration-300">
                <span>{{ $buttonIcon }}</span>
                <span>{{ $buttonText }}</span>
            </a>
        @endif

    </div>
</div>