<script lang="ts">
  import { browser } from '$app/environment';
  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>

{#if browser}
  {#await import('./HomeWithDialog.svelte')}
    <main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 sm:p-6">
      <p class="text-muted-foreground">Loading…</p>
    </main>
  {:then { default: HomeWithDialog }}
    <HomeWithDialog data={data} />
  {/await}
{:else}
  <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="text-2xl font-semibold">Base</h1>
    <div class="flex w-full max-w-xs flex-col gap-3">
      {#each visibleSlugs as slug}
        {@const site = sites[slug]}
        <a href="/{slug}" class="block">
          <Button class="h-16 w-full min-h-16" variant="outline">{site.title} | {site.description}</Button>
        </a>
      {/each}
    </div>
  </main>
{/if}
