@props(['table'])

@php
    $statusClasses = match($table->status) {
        'occupied' => 'bg-red-500',
        'reserved' => 'bg-amber-500',
        'cleaning' => 'bg-blue-500',
        default => 'bg-green-500',
    };
@endphp

<div {{ $attributes->merge(['class' => 'bg-white border border-zinc-200 rounded-sm shadow-sm hover:shadow-md hover:border-amber-500/50 transition-all p-4 relative group overflow-hidden']) }}>
    <!-- Status Accent -->
    <div class="absolute top-0 left-0 right-0 h-1 {{ $statusClasses }}"></div>

    <div class="flex justify-between items-start mb-3">
        <span class="text-lg font-black text-zinc-900 tracking-tighter">{{ $table->name }}</span>
        <div class="w-2 h-2 rounded-full {{ $statusClasses }} animate-pulse"></div>
    </div>

    <div class="flex items-center space-x-2 mb-4">
        <svg class="w-3 h-3 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
        <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">{{ $table->capacity }} SEATS</span>
    </div>

    <div class="pt-3 border-t border-zinc-100 flex items-center justify-between">
        <span class="text-[8px] font-bold uppercase tracking-widest {{ $table->status == 'available' ? 'text-green-600' : 'text-zinc-400' }}">
            {{ $table->status }}
        </span>
        <div class="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
            <a href="{{ route('portal.tables.edit', $table) }}" class="p-1 hover:bg-zinc-100 rounded-sm">
                <svg class="w-3 h-3 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            </a>
        </div>
    </div>
</div>