<!-- src/lib/components/AdminHeader.svelte -->
<script lang="ts">
  import { goto } from '$app/navigation';
  
  export let title: string;
  export let showBackButton: boolean = false;
  
  function goBack() {
    goto('/admin');
  }
  
  async function logout() {
    try {
      const res = await fetch('/api/admin/logout', {
        method: 'POST'
      });
      
      if (res.ok) {
        goto('/admin');
      }
    } catch (err) {
      console.error('Logout fehler:', err);
    }
  }
</script>

<header class="bg-white shadow-sm border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <div class="flex items-center">
        {#if showBackButton}
          <button
            on:click={goBack}
            class="mr-4 p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
            aria-label="Zurück"
          >
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
        {/if}
        
        <h1 class="text-xl font-semibold text-gray-900">{title}</h1>
      </div>
      
      <div class="flex items-center space-x-4">
        <span class="text-sm text-gray-500">Admin-Bereich</span>
        <button
          on:click={logout}
          class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors"
        >
          Abmelden
        </button>
      </div>
    </div>
  </div>
</header>