@props([
    'title' => '',
    'summary' => '',
    'image' => '',
    'link' => '#',
    'leftLabel' => 'Published',
    'leftValue' => '',
    'rightLabel' => 'Category',
    'rightValue' => '',
    'showProgress' => false,
    'progress' => 0,
    'progressColor' => 'bg-orange-400',
])

<div
    class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden flex flex-col">
    <!-- Gambar -->
    <a href="{{ $link }}">
        <img class="w-full h-48 object-cover" src="{{ $image }}" alt="{{ $title }}">
    </a>

    <!-- Konten -->
    <div class="p-5 flex-1 flex flex-col">
        <a href="{{ $link }}" class="mb-2">
            <h5 class="text-base font-semibold text-gray-900 dark:text-white line-clamp-2">
                {{ $title }}
            </h5>
        </a>

        <!-- Summary -->
        <p class="mb-4 text-sm text-gray-500 dark:text-gray-400 line-clamp-3">
            {!! Str::limit(strip_tags($summary), 100, '...') !!}
        </p>

        @if ($showProgress)
            <!-- Progress Bar -->
            <div class="w-full bg-orange-100 rounded-sm h-2 dark:bg-gray-700 mb-4">
                <div class="{{ $progressColor }} h-2 rounded-sm" style="width: {{ min($progress, 100) }}%"></div>
            </div>
        @endif

        <!-- Bottom Section -->
        <div class="flex justify-between mt-auto">
            <div>
                <h4 class="text-xs text-gray-500 dark:text-gray-400">{{ $leftLabel }}</h4>
                <h4 class="text-lg font-semibold">{{ $leftValue }}</h4>
            </div>
            <div>
                <h4 class="text-xs text-gray-500 dark:text-gray-400">{{ $rightLabel }}</h4>
                <h4 class="text-lg font-semibold">{{ $rightValue }}</h4>
            </div>
        </div>
    </div>
</div>