<script lang="ts">
  import * as Card from '$lib/components/ui/card/index.js';
  import UsersIcon from '@lucide/svelte/icons/users';
  import UploadIcon from '@lucide/svelte/icons/upload';
  import ListTodoIcon from '@lucide/svelte/icons/list-todo';
  import TrendingUpIcon from '@lucide/svelte/icons/trending-up';

  const cards = [
    {
      title: 'Total Channels',
      value: '12',
      delta: '+2 this week',
      icon: UsersIcon,
    },
    {
      title: 'Active Uploads',
      value: '4',
      delta: '+1 today',
      icon: UploadIcon,
    },
    {
      title: 'Pending Tasks',
      value: '7',
      delta: '-3 since yesterday',
      icon: ListTodoIcon,
    },
    {
      title: 'Success Rate',
      value: '98.4%',
      delta: '+0.6% mtd',
      icon: TrendingUpIcon,
    },
  ];
</script>

<div class="grid grid-cols-1 gap-4 px-4 py-4 sm:grid-cols-2 lg:grid-cols-4">
  {#each cards as card (card.title)}
    <Card.Root>
      <Card.Header>
        <div class="flex items-center justify-between">
          <Card.Title class="text-sm font-medium text-muted-foreground">
            {card.title}
          </Card.Title>
          <card.icon class="text-muted-foreground size-4" />
        </div>
      </Card.Header>
      <Card.Content>
        <div class="text-2xl font-semibold">{card.value}</div>
        <p class="text-muted-foreground mt-1 text-xs">{card.delta}</p>
      </Card.Content>
    </Card.Root>
  {/each}
</div>