@extends('layouts.docs')

@section('title', 'Badge - Design System')

@section('body')
    <div x-data="{ tab: 'examples' }" class="prose dark:prose-invert max-w-none">
        <div class="flex items-center justify-between mb-8">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg">
                    <flux:icon.tag class="size-6 text-emerald-600 dark:text-emerald-400" />
                </div>
                <h1 class="!mb-0">Badge</h1>
            </div>
            
            <div class="flex bg-zinc-100 dark:bg-zinc-900 p-1 rounded-lg border border-zinc-200 dark:border-zinc-800">
                <button @click="tab = 'examples'" :class="tab === 'examples' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'" class="px-4 py-1.5 rounded-md text-sm font-medium transition-all">Exemplos</button>
                <button @click="tab = 'code'" :class="tab === 'code' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'" class="px-4 py-1.5 rounded-md text-sm font-medium transition-all">Código</button>
            </div>
        </div>

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-12">
            Badges são pequenos elementos de UI usados para exibir contagens, estados ou etiquetas de categorização.
        </p>

        <div x-show="tab === 'examples'" class="space-y-8">
            <og-demo>
                <span class="badge badge-primary">Pendente</span>
                <span class="badge badge-success">Concluído</span>
                <span class="badge badge-danger">Cancelado</span>
                <span class="badge badge-warning">Em processamento</span>
                <span class="badge badge-info">Novo</span>
            </og-demo>

            <h2 class="text-2xl font-bold mt-12 mb-6">Pill Badges</h2>
            <og-demo>
                <span class="badge badge-pill badge-primary">12</span>
                <span class="badge badge-pill badge-success">S</span>
                <span class="badge badge-pill badge-danger">Err</span>
            </og-demo>
        </div>

        <div x-show="tab === 'code'" x-cloak>
            <pre class="language-php"><code>echo UI::Badge('Novo', 'btn-info');
echo UI::Badge('10', 'btn-primary', true); // Pill badge</code></pre>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/design-system/og-demo.js') }}"></script>
@endpush