<script lang="ts">
  import { page } from '$app/stores';

  let { children } = $props();

  const items = [
    { href: '/admin/domains', label: '🌐 Domains' },
    { href: '/admin/profiles', label: '👥 Profile' },
    { href: '/admin/backup', label: '💾 Backup' }
  ];
</script>

<nav class="tabs">
  {#each items as item (item.href)}
    <a
      href={item.href}
      class="tab"
      class:active={$page.url.pathname.startsWith(item.href)}
    >
      {item.label}
    </a>
  {/each}
</nav>

<section class="admin-body">
  {@render children()}
</section>

<style>
  .tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    padding: 0.6rem 0.9rem;
    background: white;
    border: 1px solid #e4eae7;
    border-radius: 999px;
    text-decoration: none;
    color: #444;
    font-size: 0.95rem;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .tab.active {
    background: #2b6a3d;
    color: white;
    border-color: #2b6a3d;
  }
  .admin-body {
    padding: 1rem 0;
  }
</style>
