<script>
  let { id, name, active, hasUnreads } = $props();
</script>

<li class="rounded-full" class:bg-slate-400={active}>
  <a href="/ch/{id}">
    {#if hasUnreads}
      <span class="badge bg-warning-500">❦</span>
    {:else}
      <span class="badge bg-primary-500">¶</span>
    {/if}
    <span class="flex-auto">{name}</span>
  </a>
</li>
