@props(['category', 'draggable' => false])

<div class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg border border-blue-200 mb-3"
     @if($draggable) draggable="true" data-category-id="{{ $category->id }}" @endif>
    <div class="flex items-center gap-3 flex-1">
        @if($draggable)
            <div class="cursor-move text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path>
                </svg>
            </div>
        @endif
        <h3 class="text-lg font-semibold text-gray-900">{{ $category->name }}</h3>
        @if($category->description)
            <span class="text-sm text-gray-600">- {{ $category->description }}</span>
        @endif
    </div>
    {{ $slot }}
</div>