<script lang="ts">
  import { Button } from '$lib/components/ui/button';
  import { sites, siteSlugs, type SiteSlug } from '$lib/sites';

  let { data }: { data: App.PageData } = $props();

  const visibleSlugs = $derived(
    data.user
      ? (siteSlugs.filter((slug) => data.user && data.user[slug] === true) as SiteSlug[])
      : []
  );
</script>

<main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 sm:p-6">
  <h1 class="w-full max-w-xs shrink-0 text-center text-2xl font-semibold">Base</h1>
  <div class="flex w-full max-w-xs shrink-0 flex-col gap-3">
    {#each visibleSlugs as slug}
      {@const site = sites[slug]}
      <a href="/{slug}" class="block">
        <Button class="h-16 min-h-16 w-full" variant="outline">
          {site.title} | {site.description}
        </Button>
      </a>
    {/each}
    <a href="/notifications" class="block">
      <Button class="h-12 w-full" variant="outline">Notifications</Button>
    </a>
    <a href="/profile" class="block">
      <Button class="h-12 w-full" variant="outline">Profile</Button>
    </a>
  </div>
</main>

