<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import { Card, CardContent } from "$lib/components/ui/card";

  let { data }: { data: { transactions: { id: string }[] } } = $props();
  const transactions = $derived(data?.transactions ?? []);
</script>

<svelte:head>
  <title>Transactions – Stackq</title>
</svelte:head>

<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex items-center gap-3">
      <a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a>
      <h1 class="text-xl font-semibold sm:text-2xl">Transactions</h1>
    </div>
    <a href="/transactions/new" class="block shrink-0">
      <Button class="w-full sm:w-auto">New transaction</Button>
    </a>
  </div>

  {#if transactions.length === 0}
    <Card>
      <CardContent class="flex flex-col items-center justify-center gap-4 py-12">
        <p class="text-muted-foreground text-center text-sm">No transactions yet.</p>
        <p class="text-muted-foreground text-center text-xs">Create a transaction to get started.</p>
        <a href="/transactions/new">
          <Button variant="outline">New transaction</Button>
        </a>
        <a href="/">
          <Button variant="ghost">Back to home</Button>
        </a>
      </CardContent>
    </Card>
  {:else}
    <div class="flex flex-col gap-2">
      {#each transactions as tx (tx.id)}
        <Card>
          <CardContent class="p-4">
            <a href="/transactions/{tx.id}" class="font-medium hover:underline">Transaction {tx.id}</a>
          </CardContent>
        </Card>
      {/each}
    </div>
  {/if}
</main>
