{{--
    Teacher Class Select Component
    Renders a consistent class dropdown for teacher forms.

    Usage:
        <x-teacher-class-select
            :classes="$classes"
            name="school_class_id"
            :selected="old('school_class_id', $selectedId ?? null)"
            label="Class"
            required
        />

    Props:
        $classes     — Collection of SchoolClass models
        $name        — form field name (default: school_class_id)
        $selected    — currently selected class ID
        $label       — label text (default: Class)
        $required    — whether field is required (default: false)
        $placeholder — placeholder option text
--}}
@props([
    'classes'     => collect(),
    'name'        => 'school_class_id',
    'selected'    => null,
    'label'       => 'Class',
    'required'    => false,
    'placeholder' => 'Select a class...',
])

<div class="flex flex-col gap-1">
    @if($label)
        <label for="{{ $name }}"
               class="text-sm font-medium text-slate-700 dark:text-slate-300">
            {{ $label }}
            @if($required)
                <span class="text-red-500 ml-0.5">*</span>
            @endif
        </label>
    @endif

    @if($classes->isNotEmpty())
        <select
            id="{{ $name }}"
            name="{{ $name }}"
            @if($required) required @endif
            class="block w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-sm px-3 py-2 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
        >
            <option value="">{{ $placeholder }}</option>
            @foreach($classes as $class)
                <option value="{{ $class->id }}"
                    {{ (string)$selected === (string)$class->id ? 'selected' : '' }}>
                    {{ $class->name }}
                    @if($class->level ?? null)
                        ({{ $class->level }})
                    @endif
                </option>
            @endforeach
        </select>
    @else
        <div class="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/20 px-3 py-2 text-sm text-amber-700 dark:text-amber-400">
            <svg class="h-4 w-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            No classes assigned to you yet.
        </div>
        <input type="hidden" name="{{ $name }}" value="">
    @endif

    @error($name)
        <p class="text-xs text-red-600 dark:text-red-400 mt-0.5">{{ $message }}</p>
    @enderror
</div>