@props(['item', 'type' => 'default'])

<article class="inner-card bg-surface-container-lowest rounded-xl overflow-hidden shadow-md border border-surface-container flex flex-col h-full">
    @if (!empty($item['image']))
        <div class="h-60 overflow-hidden">
            <img class="w-full h-full object-cover inner-card-image" src="{{ $item['image'] }}" alt="{{ $item['title'] }}">
        </div>
    @endif
    <div class="p-space-md flex flex-col flex-1">
        @if (!empty($item['meta']))
            <span class="font-label-sm text-label-sm text-outline uppercase mb-space-xs">{{ $item['meta'] }}</span>
        @endif
        <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">{{ $item['title'] }}</h3>
        @if (!empty($item['author']))
            <p class="text-xs text-primary font-semibold mb-space-xs">{{ $item['author'] }}</p>
        @endif
        <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed flex-1">{{ $item['description'] ?? '' }}</p>
        <div class="d-flex gap-2 flex-wrap mt-space-md">
            @if (!empty($item['url']))
                <a class="inline-flex items-center gap-1 px-space-md py-2 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors"
                    href="{{ $item['url'] }}">
                    <span>{{ $item['button'] ?? 'Know More' }}</span>
                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                </a>
            @endif
            @if (!empty($item['pdf']))
                <a class="inline-flex items-center gap-1 px-space-md py-2 bg-tertiary-container text-on-tertiary font-title-md text-title-md rounded hover:bg-tertiary transition-colors"
                    href="{{ $item['pdf'] }}">
                    <span class="material-symbols-outlined text-sm">picture_as_pdf</span>
                    <span>View PDF</span>
                </a>
            @endif
        </div>
    </div>
</article>