@props([
    'image' => true,
    'purple' => true,
    'title',
    'body',
    'button_url',
    'button_label',
    'thumbnail_image',
])

<div @if($purple) class="bg-purple" @endif>

    <div class="container-1">
        <div class="grid gap-12 py-16 md:py-24 items-center {{ !$purple ? 'md:grid-cols-[1fr,1.3fr]' : 'md:grid-cols-[1.3fr,1fr] text-white' }}">
            @if($image)
                <div class="{{!$purple?'md:order-2':''}} min-h-[320px] h-full bg-no-repeat bg-center bg-contain rounded-sm" style="background-image: url('{{ $thumbnail_image}}')"></div>
            @endif
            <div class="{{$purple?'md:order-1':''}} space-y-4 text-center md:text-left">
                <h2 class="h2 {{!$purple?'text-purple':''}} -mt-2"> {{ $title }}</h2>
                <div class="prose pb-4 {{ $purple ? 'text-white' : '' }}">
                    {!! $body !!}
                </div>
                <a href="{{ $button_url }}" class="btn-bright-pink">{{ $button_label }}</a>
            </div>
        </div>
    </div>

</div>


{{--
EXAMPLE:

<div class="bg-purple">
    <div class="container-1">
        <x-banner :flip="true" :image="fake()->imageUrl" class="text-white">
            <h2 class="h2 -mt-2">{{ fake()->sentence }}</h2>
            <p>{{ fake()->paragraph }} {{ fake()->paragraph }}</p>
            <a href="#" class="btn-bright-pink">This is a link</a>
        </x-banner>
    </div>
</div>

--}}