<script lang="ts">
  import GroupCard from '$lib/ui/data/GroupCard.svelte';

  type GroupItem = {
    id: string;
    name: string | null;
    counts: { open: number; unassigned: number };
  };
  type TaskItem = {
    id: number;
    description: string;
    due_date: string | null;
    display_code: number | null;
  };

  export let data: { groups: GroupItem[]; previews?: Record<string, TaskItem[]> };
  const groups = data.groups || [];
  const previews = data.previews || {};
</script>

<svelte:head>
  <title>Grupos</title>
  <meta name="robots" content="noindex,nofollow" />
</svelte:head>

{#if groups.length === 0}
  <p>No perteneces a ningún grupo permitido.</p>
{:else}
  <h1 class="title">Grupos</h1>
  <div class="grid">
    {#each groups as g}
      <GroupCard id={g.id} name={g.name} counts={g.counts} previews={previews[g.id] || []} />
    {/each}
  </div>
{/if}

<style>
  .title { margin-bottom: .75rem; }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
  }
</style>
