<script lang="ts">
  import type { ColumnDef } from '@tanstack/table-core';
  import SectionCards from '$lib/components/section-cards.svelte';
  import * as Card from '$lib/components/ui/card/index.js';
  import * as DataTable from '$lib/components/ui/data-table/index.js';

  let { data } = $props();

  type Channel = {
    id: string;
    name: string;
    status: 'active' | 'paused' | 'archived';
    uploaded: number;
  };

  const columns: ColumnDef<Channel>[] = [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'status', header: 'Status' },
    { accessorKey: 'uploaded', header: 'Uploads' },
  ];

  const rows: Channel[] = [
    { id: 'CH-001', name: 'Main feed', status: 'active', uploaded: 1248 },
    { id: 'CH-002', name: 'Archive', status: 'paused', uploaded: 412 },
    { id: 'CH-003', name: 'Outreach', status: 'active', uploaded: 89 },
  ];
</script>

<svelte:head>
  <title>{data.title}</title>
</svelte:head>

<SectionCards />

<Card.Root class="mx-4 mb-4">
  <Card.Header>
    <Card.Title>Channels</Card.Title>
    <Card.Description>Recent channel activity.</Card.Description>
  </Card.Header>
  <Card.Content>
    <table class="w-full text-sm">
      <thead>
        <tr class="text-muted-foreground border-b text-left">
          {#each columns as col}
            <th class="py-2 pr-4 font-medium">{col.header as string}</th>
          {/each}
        </tr>
      </thead>
      <tbody>
        {#each rows as row (row.id)}
          <tr class="border-b last:border-0">
            <td class="py-2 pr-4">{row.id}</td>
            <td class="py-2 pr-4">{row.name}</td>
            <td class="py-2 pr-4">{row.status}</td>
            <td class="py-2 pr-4">{row.uploaded}</td>
          </tr>
        {/each}
      </tbody>
    </table>
  </Card.Content>
</Card.Root>