<script lang="ts">
  import { browser } from "$app/environment";
  import { Button } from "$lib/components/ui/button";

  let { data }: { data: { items: { id: string; SKU?: string }[]; itemsForParent: { id: string; Item: string; SKU: string }[] } } = $props();
</script>

{#if browser}
  {#await import("./HomeWithDialog.svelte")}
    <main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-6 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-6 p-6">
    <h1 class="text-2xl font-semibold">Stackq</h1>
    <div class="flex w-full max-w-xs flex-col gap-3">
      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
        <span>Scan</span>
        <span class="text-xs font-medium">Coming soon</span>
      </div>
      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
        <span>New Transaction</span>
        <span class="text-xs font-medium">Coming soon</span>
      </div>
      <a href="/receipts" class="block">
        <Button class="h-12 min-h-12 w-full" variant="outline">New receipt</Button>
      </a>
      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
        <span>New Item</span>
        <span class="text-xs font-medium">Coming soon</span>
      </div>
    </div>
    <div class="text-muted-foreground w-full max-w-xs border-t pt-4 text-center text-sm">Go to</div>
    <div class="flex w-full max-w-xs flex-col gap-2">
      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
        <span>Items</span>
        <span class="text-xs font-medium">Coming soon</span>
      </div>
      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
        <span>Transactions</span>
        <span class="text-xs font-medium">Coming soon</span>
      </div>
      <a href="/receipts" class="block">
        <Button class="h-12 min-h-12 w-full" variant="outline">Receipts</Button>
      </a>
      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
        <span>Accounts</span>
        <span class="text-xs font-medium">Coming soon</span>
      </div>
    </div>
  </main>
{/if}
