@props([
'icon' => null,
'title' => '',
'description' => '',
'transparent' => false,
'showIcon' => true,
'index' => null,
'position' => 'center',
])

<x-molecules.card-border :transparent="$transparent" :position="$position" {{ $attributes->merge(['data-appear-from-bottom' => '']) }}>
    @if($index !== null)
    <div class="inline-flex shrink-0 items-center justify-center w-10 h-10 bg-primary/10 rounded-xl mb-4">
        <span class="text-xl font-bold text-primary">{{ str_pad($index, 2, '0', STR_PAD_LEFT) }}</span>
    </div>
    @elseif($showIcon && $icon)
    <div class="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center mb-4">
        <x-atoms.icon :name="$icon" class="w-6 h-6 text-primary" />
    </div>
    @endif

    @if($title)
    <h3 class="text-lg font-semibold shrink-0 mb-2">{!! $title !!}</h3>
    @endif

    @if(is_array($description))
    <ul class="shrink-0 text-base text-muted-foreground leading-relaxed list-none list-inside">
        @foreach($description as $item)
        <li class="px-4">{{ $item }}</li>
        @endforeach
    </ul>
    @elseif($description)
    <p class="shrink-0 text-base text-muted-foreground leading-relaxed">{!! $description !!}</p>
    @endif

    {{ $slot }}
</x-molecules.card-border>