@props([
    'concept' => null,
    'state' => null,
])

@php
    $states = [
        'loading'    => ['Loading', 'mdi-loading', 'secondary'],
        'empty'      => ['Empty state', 'mdi-inbox-outline', 'secondary'],
        'completed'  => ['Completed / generated', 'mdi-check-decagram', 'success'],
        'validation' => ['Validation errors', 'mdi-alert-circle-outline', 'danger'],
        'missing'    => ['Missing evidence', 'mdi-shield-alert-outline', 'warning'],
    ];
    [$label, $icon, $variant] = $states[$state] ?? [null, null, null];
@endphp

<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 p-2 rounded bg-body-tertiary border">
    <div class="d-flex align-items-center gap-2">
        <a href="{{ route('clients.witness.design', request()->route('client')) }}"
           class="btn btn-sm btn-outline-secondary" wire:navigate>
            <span class="mdi mdi-arrow-left" aria-hidden="true"></span> Design exercise
        </a>
        @if($concept)
            <span class="fw-semibold">{{ $concept }}</span>
        @endif
    </div>
    <div class="d-flex align-items-center gap-2">
        @if($label)
            <span class="badge rounded-pill bg-{{ $variant }}-subtle text-{{ $variant }}-emphasis">
                <span class="mdi {{ $icon }}" aria-hidden="true"></span> Previewing: {{ $label }}
            </span>
        @endif
        <div class="btn-group btn-group-sm" role="group" aria-label="Preview state">
            @foreach(['default' => 'Default','empty' => 'Empty','loading' => 'Loading','validation' => 'Validation','missing' => 'Missing evidence','completed' => 'Completed'] as $key => $lbl)
                <a class="btn btn-outline-secondary {{ ($state ?? 'default') === $key ? 'active' : '' }}"
                   href="{{ url()->current() }}{{ $key === 'default' ? '' : '?state='.$key }}">{{ $lbl }}</a>
            @endforeach
        </div>
    </div>
</div>