<script>
  import { createEventDispatcher } from 'svelte';

  export let active = 'tickets';
  export let unreadMailCount = 0;

  const dispatch = createEventDispatcher();
  const tabs = [
    { id: 'tickets', label: 'Tickets' },
    { id: 'mail', label: 'Mail' },
    { id: 'docs', label: 'Docs' },
    { id: 'vms', label: 'VMs' },
    { id: 'profile', label: 'Profile' }
  ];
</script>

<nav class="sidebar">
  {#each tabs as tab}
    <button
      class:active={tab.id === active}
      on:click={() => dispatch('change', tab.id)}
    >
      <span>{tab.label}</span>
      {#if tab.id === 'mail' && unreadMailCount > 0}
        <span class="badge">{unreadMailCount}</span>
      {/if}
    </button>
  {/each}
</nav>

<style>
  .sidebar {
    display: grid;
    gap: 0.6rem;
    align-content: start;
  }

  button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
  }

  button:hover {
    transform: translateX(2px);
    border-color: rgba(214, 104, 56, 0.35);
  }

  button.active {
    background: linear-gradient(135deg, rgba(214, 104, 56, 0.22), rgba(255, 255, 255, 0.04));
    border-color: rgba(214, 104, 56, 0.45);
  }

  .badge {
    min-width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff4ed;
    background: rgba(214, 104, 56, 0.22);
    border: 1px solid rgba(214, 104, 56, 0.35);
  }
</style>
