@extends('layouts.docs')

@section('title', 'Alert - 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-red-100 dark:bg-red-900/30 rounded-lg">
                    <flux:icon.bell class="size-6 text-red-600 dark:text-red-400" />
                </div>
                <h1 class="!mb-0">Alert</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">
            Alertas fornecem feedback contextual sobre ações do utilizador ou mensagens importantes do sistema.
        </p>

        <div x-show="tab === 'examples'" class="space-y-8">
            <og-demo>
                <div class="alert alert-primary" role="alert">Este é um alerta primário!</div>
                <div class="alert alert-success" role="alert">Ação concluída com sucesso.</div>
                <div class="alert alert-danger" role="alert">Ocorreu um erro crítico.</div>
                <div class="alert alert-warning" role="alert">Atenção: verifique os dados introduzidos.</div>
            </og-demo>

            <h2 class="text-2xl font-bold mt-12 mb-6">Com Conteúdo Adicional</h2>
            <og-demo>
                <div class="alert alert-info" role="alert">
                    <h4 class="alert-heading">Informação Importante!</h4>
                    <p>Este alerta contém mais detalhes sobre o processo em curso.</p>
                    <hr>
                    <p class="mb-0">Pode fechar esta mensagem quando terminar a leitura.</p>
                </div>
            </og-demo>
        </div>

        <div x-show="tab === 'code'" x-cloak>
            <pre class="language-php"><code>echo UI::Alert('Sucesso!', 'btn-success');

// Com ícone
echo UI::Alert('Erro no servidor', 'btn-danger', 'og-icon-warning');</code></pre>
        </div>
    </div>
@endsection

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