@props([
    'image' => null,
    'title' => '',
    'description' => '',
    'contentType' => false,
    'theme' => 'light',
    'url' => '#',
    'duration' => '',
    'listenableData' => null,
])
<a href="{{ $url }}" {{ $attributes->class('block sm:flex gap-7 ' . ($theme==='dark'?'text-white':'')) }}
    x-data="{
        duration: @js($duration),
        secondsRemaining: @js($listenableData['seconds_remaining'] ?? null),
        formatMinutesRemaining(seconds) {
            const minutes = Math.ceil(seconds / 60);
            return `${minutes} minute${minutes !== 1 ? 's' : ''} left`;
        }
    }"    
>
    <div class="hidden sm:block max-w-[6.3rem] flex-none mx-auto">
        <div class="relative">
            <img class="w-full aspect-square" src="{{ $image }}" />
        </div>
    </div>

    <div class="flex-auto space-y-3">
        @if($contentType)
            <h4 class="text-pink text-sm font-semibold uppercase">{{ $contentType }}</h4>
        @endif
        <div class="space-y-3 lg:space-y-0 lg:flex flex-col justify-between gap-4">
            <h3 class="text-base sm:text-lg font-bold">{{ $title }}</h3>
            <div class="flex-none">{{ $context ?? '' }}</div> 
        </div>

        <p class="text-sm sm:text-base">{!! $description !!}</p>
    </div>
</a>