<script lang="ts">
  import type { AISessionItem, WorkbenchChannel, WorkbenchProject } from './types';

  export let project: WorkbenchProject;
  export let channels: WorkbenchChannel[];
  export let selectedChannelID: string;
  export let tags: string[];
  export let recentSessions: AISessionItem[];
  export let onSelectChannel: (channelID: string) => void;
</script>

<aside class="channel-sidebar" aria-label="Project channels">
  <header>
    <div>
      <p>Current project</p>
      <h2>{project.name}</h2>
    </div>
    <button aria-label="Project settings">&#9881;</button>
  </header>

  <section class="tag-row" aria-label="Project tags">
    {#each tags as tag}
      <button type="button">#{tag}</button>
    {/each}
  </section>

  <section class="channel-group">
    {#each channels as channel}
      <button
        class:active={channel.id === selectedChannelID}
        aria-pressed={channel.id === selectedChannelID}
        aria-label={`${channel.title}${channel.count ? ` ${channel.count}` : ''}`}
        on:click={() => onSelectChannel(channel.id)}
      >
        <span>{channel.title}</span>
        {#if channel.count !== undefined}
          <small>{channel.count}</small>
        {/if}
      </button>
    {/each}
  </section>

  <section class="recent-sessions" aria-label="Recent sessions">
    <h3>Recent sessions</h3>
    {#each recentSessions as session}
      <button type="button">
        <span>{session.title}</span>
        <small>{session.updatedAt}</small>
      </button>
    {/each}
  </section>
</aside>
