@props([
    'title' => null,
    'category' => null,
    'tinyCard' => false,
    'postUrl' => '#',
    'createdAt' => null,
    'image' => [
        'url' =>
            'https://images.pexels.com/photos/5238645/pexels-photo-5238645.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
        'alt' => '',
    ],
])
@php
  $baseClass =
      'article-card card overflow-hidden bg-white group h-full img-zoom-hover rounded-none' . ($tinyCard ? ' card-side' : '');
  $figureClass = $tinyCard ? 'max-w-[35%] grow shrink-0' : 'grow overflow-hidden';
  $bodyClass = $tinyCard ? 'p-4' : 'py-6 px-0';
  $imgClass = $tinyCard ? 'aspect-video h-full ' : 'aspect-video h-full w-full object-cover';
@endphp
<a {{ $attributes->merge(['class' => 'w-full block']) }} href="{{ $postUrl }}">
  <article {{ $attributes->merge(['class' => $baseClass]) }}>
    <figure class="{{ $figureClass }}">
      <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}" class="{{ $imgClass }}" />
    </figure>
    <div class="{{ $bodyClass }}">
      @isset($category)
      @php
        $limit = $tinyCard ? 28 : 40;
      @endphp
        <p class="text-primary uppercase text-sm leading-tight">{!! \Illuminate\Support\Str::limit(strip_tags($category), $limit) !!}</p>
        <small class="whitespace-nowrap text-xs text-gray-400">{{ $createdAt }}</small>
      @endisset
      <h2 @class([
          'article-title mb-2 transition-colors duration-300 group-hover:!text-primary title-section-blue-variant',
          'text-xl' => $tinyCard,
          'leading-[1.25]' => $tinyCard,
          'leading-tight' => !$tinyCard,
          'text-xl md:text-3xl' => !$tinyCard,
      ])>
        {{ $title }}</h2>
      {{ $slot }}
    </div>
  </article>
</a>