@props([
    'number' => 0,
    'title' => null,
    'description' => null, // ini sama dengan 'answer' di Alpine
])

<div 
    x-data="{ active: false }" 
    class="card bg-[#1E1E1E] p-8 shadow-md border border-graycoffee"
>
    <div class="flex items-center space-x-4 mb-4">
        <!-- Kotak nomor -->
        <div 
            :class="active ? 'bg-gradient-to-b from-accent to-graycoffee text-zinc-200' : 'relative p-[1px] rounded-xl bg-gradient-to-b from-lightcoffee to-graycoffee text-zinc-200'" 
            class="font-bold shadow-md w-16 h-16 rounded-md flex items-center justify-center text-base transition-colors"
        >
            <span class="text-xl">{{ $number}}</span>
        </div>

        <!-- Judul -->
        <h3 
            :class="active ? 'text-[#9EFF10]' : 'text-white'" 
            class="font-medium font-barlow text-xl flex-1 transition-colors"
        >
            {{ ucfirst($title) }}
        </h3>

        <!-- Tombol -->
        <button  
            @click="active = !active" 
            x-text="active ? 'x' : '+'"
            x-transition
            class="text-[#9EFF10] font-bold text-xl w-12 h-12 flex items-center justify-center rounded-md border border-[#9EFF10] hover:bg-[#9EFF10] hover:text-[#1E1E1E]">
        </button>
    </div>

    <!-- Konten -->
    <div 
        x-show="active" 
        x-transition 
        class="contain text-base font-light font-barlow pl-20 text-gray-300"
    >
        {{ $description ?? 'does not any answered yet' }}
    </div>
</div>