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

  export let groupLabel: string;
  export let gc: { border?: string; bg?: string; text?: string } | null = null;
  export let due_date: string | null = null;
</script>

<span
  class="group-badge"
  title="Grupo"
  style={gc
    ? `--gc-border: ${gc.border}; --gc-bg: ${gc.bg}; --gc-text: ${gc.text};`
    : undefined}
>
  {groupLabel}
</span>
{#if due_date}
  <TaskDueBadge {due_date} />
{/if}

<style>
  .group-badge {
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--gc-border, var(--color-border));
    background: var(--gc-bg, transparent);
    color: var(--gc-text, inherit);
    font-size: 12px;
  }
</style>
