@props(['embed'])

<article class="blog-rich-embed-card blog-rich-embed-card--post {{ empty($embed['available']) ? 'blog-rich-embed-card--unavailable' : '' }}">
  @if(!empty($embed['available']))
    <a href="{{ $embed['url'] }}" class="blog-rich-embed-card__media">
      <img src="{{ $embed['image_url'] }}" alt="{{ $embed['title'] }}" loading="lazy" decoding="async">
    </a>
  @else
    <div class="blog-rich-embed-card__media">
      <img src="{{ $embed['image_url'] }}" alt="{{ $embed['title'] }}" loading="lazy" decoding="async">
    </div>
  @endif

  <div class="blog-rich-embed-card__body">
    <p class="blog-rich-embed-card__eyebrow">{{ $embed['domain_label'] ?? 'Blog' }} · {{ $embed['domain_host'] ?? 'mariachis.co' }}</p>
    <h3 class="blog-rich-embed-card__title">{{ $embed['title'] }}</h3>
    <p class="blog-rich-embed-card__description">{{ $embed['description'] }}</p>
    <div class="blog-rich-embed-card__footer">
      <span class="blog-rich-embed-card__meta">{{ $embed['domain_label'] ?? 'Blog' }}</span>
      @if(!empty($embed['available']))
        <a href="{{ $embed['url'] }}" class="blog-rich-embed-card__cta"><span>{{ $embed['button_label'] ?? 'Leer artículo' }}</span></a>
      @else
        <span class="blog-rich-embed-card__cta blog-rich-embed-card__cta--muted"><span>{{ $embed['button_label'] ?? 'Leer artículo' }}</span></span>
      @endif
    </div>
  </div>
</article>