@props([
    'card' => null,
    'title' => null,
    'description' => null,
    'icons' => null,
    'links' => null,
])

<div {{ $attributes->merge(['class' => 'border border-graycoffee p-6 flex flex-col justify-between']) }}>
    <div class="space-y-3">
        @if($icons)
            <img src="{{ asset('/storage/' . $icons) }}" alt="{{ $title ?? 'icon' }}" class="w-12 h-auto">
        @endif

        @if($title)
            <h1 class="text-base font-medium text-zinc-100">
                {{ $title }}
            </h1>
        @endif

        @if($description)
            <p class="text-zinc-400 text-xs leading-relaxed">
                {{ $description }}
            </p>
        @endif
    </div>

    @if($links)
        <div class="w-full h-8 mt-4 rounded flex items-center justify-center bg-graycoffee hover:bg-zinc-700 transition">
            <a href="{{ $links }}" class="text-zinc-100 text-xs font-medium">Learn More</a>
        </div>
    @endif
</div>