@props([
    'thumbnail_image' => null,
    'subTitle' => '',
    'title' => '',
    'author' => '',
    'description' => '',
    'href'=> null,
    'isLive' => false
])

@if($href)
<a {{ $attributes }} href="{{ $href }}" class="group block" title="{{$isLive? 'Listen Live':''}}">
@else
<div {{ $attributes }} class="group block">
@endif

    <div
        class="sm:flex gap-9 text-white mx-auto text-center sm:text-left max-w-sm {{$isLive ? 'sm:max-w-[900px] bg-grey-900 sm:bg-grey-800 p-7' : 'sm:max-w-[740px]'}}">

        <div class="w-[9rem] sm:w-[13rem] flex-none mx-auto">
            <div class="w-full relative group-hover:scale-105 transition ease-swift-out duration-250">

                <div class="aspect-square w-[9rem] sm:w-[13rem] bg-cover bg-no-repeat bg-center"
                     style="background-image: url('{{ $thumbnail_image }}');"></div>

                @if($isLive)
                    <div class="absolute bottom-0 left-0 text-lg font-extrabold uppercase px-4 py-2">Live</div>
                @endif

            </div>
        </div>

        <div class="flex-auto space-y-3 pt-5 sm:pt-0">
            <h4 class="text-xl font-bold text-pink">
                {{ $isLive ? 'NOW' : $subTitle }}
            </h4>
            <div>
                <h3 class="text-xl sm:text-2xl font-bold">{{ $title }}</h3>
                <p class="sm:text-lg">{{ $author }}</p>
            </div>
            <p class="text-sm sm:text-base">{{ $description }}</p>

            {{--
                We are using the wrapped a tag instead of this button to direct us to the correct page.
                AKA, it's a fake button.
             --}}
            @if($isLive && $href)
                <button type="button" class="btn-bright-pink" tabindex="-1" aria-hidden>
                    Listen Live
                </button>
            @endif
        </div>
    </div>

@if($href)
    </a>
@else
    </div>
@endif