@props(['session' => [], 'showActions' => true])

@php
$statusColors = [
    'scheduled' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    'in_progress' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
    'completed' => 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400',
    'cancelled' => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
];
@endphp

<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-4 hover:shadow-md transition-all duration-200">
    <div class="flex items-start justify-between mb-3">
        <div class="flex items-center gap-3">
            <div class="h-10 w-10 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center text-primary-600 dark:text-primary-400">
                <span class="text-lg">📅</span>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $session['subject'] ?? '' }}</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400">{{ $session['class'] ?? '' }} · {{ $session['teacher'] ?? '' }}</p>
            </div>
        </div>
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$session['status'] ?? 'scheduled'] }}">
            {{ ucfirst(str_replace('_', ' ', $session['status'] ?? 'scheduled')) }}
        </span>
    </div>

    <div class="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400 mb-3">
        <span class="flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            {{ $session['date'] ?? '' }}
        </span>
        <span class="flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ $session['time'] ?? '' }}
        </span>
        <span class="flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            {{ $session['room'] ?? '' }}
        </span>
        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium {{ ($session['mode'] ?? '') === 'online' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400' }}">
            {{ ($session['mode'] ?? '') === 'online' ? 'Online' : 'Physical' }}
        </span>
    </div>

    @if($showActions)
        <div class="flex items-center gap-2">
            @if(($session['status'] ?? '') === 'scheduled')
                <a href="{{ url('/teacher/sessions/' . ($session['id'] ?? '')) }}" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white text-xs font-semibold rounded-lg transition-colors">Start Session</a>
            @elseif(($session['status'] ?? '') === 'in_progress')
                <a href="{{ url('/teacher/classroom/' . ($session['id'] ?? '')) }}" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold rounded-lg transition-colors">Join Classroom</a>
            @endif
            <a href="{{ url('/teacher/sessions/' . ($session['id'] ?? '')) }}" class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg transition-colors">View Details</a>
        </div>
    @endif
</div>