@php
    $variant = $variant ?? 'default';
    $metrics = array_slice($showcase->metrics ?? [], 0, 2);
    $tags = array_slice($showcase->tags ?? [], 0, 2);
@endphp

<article class="showcase-card showcase-card-{{ $variant }} h-100">
    <div class="showcase-card-media">
        <img src="{{ asset($showcase->cover_image) }}" alt="{{ $showcase->title }}">
    </div>
    <div class="showcase-card-body">
        <div class="showcase-card-top">
            <span class="showcase-card-chip">{{ $showcase->category }}</span>
            <span class="showcase-card-code">{{ $showcase->eyebrow }}</span>
        </div>
        <div class="d-flex flex-column gap-2">
            <h3 class="showcase-card-title">
                <a href="{{ route('showcases.show', $showcase) }}" class="text-decoration-none text-color">{{ $showcase->title }}</a>
            </h3>
            <p class="showcase-card-excerpt mb-0">{{ $showcase->excerpt }}</p>
        </div>
        <div class="showcase-card-meta">
            <span><i class="fa-solid fa-user-tie"></i>{{ $showcase->client_name }}</span>
            <span><i class="fa-solid fa-location-dot"></i>{{ $showcase->location }}</span>
            <span><i class="fa-solid fa-calendar"></i>{{ $showcase->year_label }}</span>
        </div>
        @if ($metrics !== [])
            <div class="showcase-card-metrics">
                @foreach ($metrics as $metric)
                    <div class="showcase-card-metric">
                        <strong>{{ $metric['value'] }}</strong>
                        <span>{{ $metric['label'] }}</span>
                    </div>
                @endforeach
            </div>
        @endif
        <div class="mt-auto d-flex flex-wrap gap-2 align-items-center justify-content-between">
            <div class="showcase-card-tags">
                @foreach ($tags as $tag)
                    <span>{{ $tag }}</span>
                @endforeach
            </div>
            <a href="{{ route('showcases.show', $showcase) }}" class="btn btn-accent line d-flex flex-row gap-2 w-max-content">
                <span>مشاهده پروژه</span>
                <i class="rtmicon rtmicon-arrow-up-right"></i>
            </a>
        </div>
    </div>
</article>