<script>
  import * as json from '$lib/swatch/json.js';

  import ConversationList from '$lib/components/ConversationList.svelte';

  let conversationsInput = $state(
    json.encode([
      {
        id: 'Czero',
        name: 'A long conversation',
        hasUnreads: false,
      },
      {
        id: 'Cone',
        name: 'A shorter conversation',
        hasUnreads: true,
      },
    ]),
  );
  let conversations = $derived(json.decode(conversationsInput));

  let active = $state(null);
</script>

<h1><code>ConversationList</code></h1>

<nav><p><a href=".">Back to swatches</a></p></nav>

<h2>properties</h2>

<div class="component-properties">
  <label
    ><p>conversations (json)</p>
    <textarea bind:value={conversationsInput}></textarea>
  </label>

  <label>active <input type="text" bind:value={active} /></label>
  <div class="suggestion">
    interesting values:
    <button onclick={() => (active = null)}>(none)</button>
    <button onclick={() => (active = 'Czero')}>Czero</button>
    <button onclick={() => (active = 'Cone')}>Cone</button>
  </div>
</div>

<h2>rendered</h2>

<div class="component-preview">
  <ConversationList {conversations} {active} />
</div>
