@props([
    'interview',
])

@php
    $statusColor = match($interview->status) {
        'completed' => 'text-emerald-600',
        'blocked' => 'text-red-600',
        default => 'text-indigo-600',
    };
@endphp

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 bg-slate-50 border border-slate-200 rounded-xl p-4 mb-7">
    <div>
        <label class="block text-[11px] uppercase font-bold text-slate-500 mb-1">Candidate Name</label>
        <span class="font-bold text-sm text-slate-900">{{ $interview->candidate_name }}</span>
    </div>
    <div>
        <label class="block text-[11px] uppercase font-bold text-slate-500 mb-1">Email Address</label>
        <span class="font-semibold text-xs text-slate-700 font-mono">{{ $interview->candidate_email }}</span>
    </div>
    <div>
        <label class="block text-[11px] uppercase font-bold text-slate-500 mb-1">Language & Tech</label>
        <span class="font-bold text-sm text-slate-900 uppercase font-mono">{{ $interview->language }}</span>
    </div>
    <div>
        <label class="block text-[11px] uppercase font-bold text-slate-500 mb-1">Assessment Status</label>
        <span class="font-extrabold text-sm uppercase {{ $statusColor }}">
            {{ $interview->status }}
        </span>
    </div>
</div>