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

  export let projects: WorkbenchProject[];
  export let selectedProjectID: number;
  export let onSelectProject: (projectID: number) => void;
</script>

<nav class="project-rail" aria-label="Project list">
  <button class="rail-logo" aria-label="Dashboard" disabled>SA</button>
  {#each projects as project}
    <button
      class:active={project.id === selectedProjectID}
      aria-pressed={project.id === selectedProjectID}
      aria-label={project.name}
      title={project.name}
      on:click={() => onSelectProject(project.id)}
    >
      <span class="project-initials">{project.initials}</span>
      {#if project.unreadCount}
        <small class:urgent={project.unreadCount > 20} aria-label={`${project.name} updates ${project.unreadCount}`}>{project.unreadCount}</small>
      {/if}
    </button>
  {/each}
  <button class="add-project" aria-label="Create project" disabled>+</button>
</nav>
