<script lang="ts">
  import { compareYmd, todayYmdUTC, ymdToDmy, isToday, isTomorrow } from "$lib/utils/date";
  import DueOkIcon from "$lib/ui/icons/DueOkIcon.svelte";
  import DueSoonIcon from "$lib/ui/icons/DueSoonIcon.svelte";
  import DueOverdueIcon from "$lib/ui/icons/DueOverdueIcon.svelte";

  export let due_date: string | null;

  $: today = todayYmdUTC();
  $: overdue = !!due_date && compareYmd(due_date, today) < 0;
  $: imminent = !!due_date && (isToday(due_date!) || isTomorrow(due_date!));
  $: dateDmy = due_date ? ymdToDmy(due_date) : "";
  $: title = overdue ? "Vencida" : imminent ? "Próxima" : "Fecha";
</script>

{#if due_date}
  <span class="date-badge" class:overdue class:soon={imminent} {title}>
    {#if !overdue && !imminent}
      <DueOkIcon />
    {:else if imminent}
      <DueSoonIcon />
    {:else}
      <DueOverdueIcon />
    {/if}
    {dateDmy}
  </span>
{/if}

<style>
  .date-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 12px;
  }
  .date-badge.overdue {
    border-color: var(--color-danger);
  }
  .date-badge.soon {
    border-color: var(--color-warning);
  }
</style>
