{{--
    Certification (PRD §15.1). Placeholders are visibly and textually placeholders and never link out (PRD §15.2).
--}}
@props(['certification', 'compact' => false, 'headingLevel' => 3])
@php
    $logo = $certification->getFirstMedia(\App\Domain\Media\MediaCollection::Logo->value);
    $verify = $certification->verificationUrl();
    $date = $certification->issued_on?->format('M Y') ?? $certification->issued_year;
@endphp
<x-card as="article" {{ $attributes->class(['flex h-full gap-4', 'border-dashed !border-warning' => $certification->is_placeholder]) }}>
    @if ($logo)
        <x-media.image :media="$logo" conversion="thumb" sizes="64px" class="size-16 shrink-0 rounded-md object-contain" />
    @endif
    <div class="min-w-0 space-y-1">
        @if ($certification->is_placeholder)
            <x-tag tone="placeholder">{{ __('portfolio.ui.placeholder') }}</x-tag>
        @endif
        <h{{ $headingLevel }} class="text-h4">{{ $certification->name }}</h{{ $headingLevel }}>
        <p class="text-sm text-muted">{{ collect([$certification->issuer, $date])->filter()->implode(' · ') }}</p>
        @unless ($compact)
            @if ($certification->expires_on)
                <p class="text-sm text-muted">{{ __('portfolio.ui.expires', ['date' => $certification->expires_on->format('M Y')]) }}</p>
            @endif
            @if ($certification->credential_id && ! $certification->is_placeholder)
                <p class="text-sm text-muted">{{ __('portfolio.ui.credential_id', ['id' => $certification->credential_id]) }}</p>
            @endif
            @if ($verify)
                <a href="{{ $verify }}" target="_blank" rel="noopener" class="inline-flex min-h-11 items-center gap-1 text-sm font-semibold"
                   data-track="external_link_click" data-track-props='{"type":"credential","certification":"{{ $certification->id }}"}'>
                    {{ __('portfolio.ui.verify_credential') }} <x-icon name="heroicon-o-arrow-top-right-on-square" class="size-4" />
                    <span class="sr-only">{{ __('portfolio.a11y.opens_new_tab') }}</span>
                </a>
            @endif
        @endunless
    </div>
</x-card>