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

  let { data, params }: { data: unknown; params: { id: string } } = $props();
</script>

<svelte:head>
  <title>Receipt – 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 items-center gap-3">
    <a href="/receipts" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to receipts">Back</a>
    <h1 class="text-xl font-semibold sm:text-2xl">Receipt</h1>
  </div>

  <Card>
    <CardContent class="flex flex-col gap-4 py-8">
      <p class="text-muted-foreground text-sm">Receipt {params.id}</p>
      <a href="/receipts">
        <Button variant="outline">Back to receipts</Button>
      </a>
    </CardContent>
  </Card>
</main>
