<script lang="ts">
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
  import LayoutDashboardIcon from '@lucide/svelte/icons/layout-dashboard';
  import RadioIcon from '@lucide/svelte/icons/radio';
  import UploadIcon from '@lucide/svelte/icons/upload';
  import SettingsIcon from '@lucide/svelte/icons/settings';

  const items = [
    { title: 'Dashboard', url: '/', icon: LayoutDashboardIcon },
    { title: 'Channels', url: '/channels', icon: RadioIcon },
    { title: 'Uploads', url: '/uploads', icon: UploadIcon },
    { title: 'Settings', url: '/settings', icon: SettingsIcon },
  ];
</script>

<Sidebar.Group>
  <Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
  <Sidebar.GroupContent>
    <Sidebar.Menu>
      {#each items as item (item.title)}
        <Sidebar.MenuItem>
          <a href={item.url} class="flex items-center gap-2">
            <item.icon class="size-4" />
            <span>{item.title}</span>
          </a>
        </Sidebar.MenuItem>
      {/each}
    </Sidebar.Menu>
  </Sidebar.GroupContent>
</Sidebar.Group>