<!-- src/lib/components/AdminNavigation.svelte -->
<script lang="ts">
  interface NavigationItem {
    href: string;
    title: string;
    icon: string;
    description: string;
    color: string;
  }

  const navigationItems: NavigationItem[] = [
    {
      href: '/admin/anmeldungen',
      title: 'Anmeldungen',
      icon: '📝',
      description: 'Praktikumsanmeldungen anzeigen und verwalten',
      color: 'bg-blue-600 hover:bg-blue-700'
    },
    {
      href: '/admin/dienststellen',
      title: 'Dienststellen',
      icon: '🏢',
      description: 'Dienststellen hinzufügen und bearbeiten',
      color: 'bg-green-600 hover:bg-green-700'
    },
    {
      href: '/admin/zeitraeume',
      title: 'Zeiträume',
      icon: '🗓️',
      description: 'Praktikumszeiträume verwalten',
      color: 'bg-purple-600 hover:bg-purple-700'
    },
    {
      href: '/admin/plaetze',
      title: 'Plätze verwalten',
      icon: '📊',
      description: 'Praktikumsplätze pro Zeitraum und Dienststelle festlegen',
      color: 'bg-indigo-600 hover:bg-indigo-700'
    },
    {
      href: '/admin/change-password',
      title: 'Passwort ändern',
      icon: '🔒',
      description: 'Admin-Passwort aktualisieren',
      color: 'bg-orange-600 hover:bg-orange-700'
    }
  ];
</script>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  {#each navigationItems as item}
    <a
      href={item.href}
      class="group {item.color} text-white p-6 rounded-lg shadow-md transition-all duration-200 hover:shadow-lg hover:transform hover:scale-105"
    >
      <div class="flex items-start space-x-4">
        <div class="text-3xl">
          {item.icon}
        </div>
        <div>
          <h3 class="text-xl font-semibold mb-2">
            {item.title}
          </h3>
          <p class="text-white/90 text-sm">
            {item.description}
          </p>
        </div>
      </div>
    </a>
  {/each}
</div>

<style>
  /* Zusätzliche Hover-Effekte */
  .group:hover {
    transform: translateY(-2px);
  }
</style>