<script lang="ts">
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
  import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar/index.js";
  import UserIcon from "@lucide/svelte/icons/user";

  // Sample members data
  const members = [
    { id: 1, name: "Alice", status: "online", image: "https://placehold.co/40x40" },
    { id: 2, name: "Bob", status: "online", image: "https://placehold.co/40x40" },
    { id: 3, name: "Charlie", status: "offline", image: "https://placehold.co/40x40" },
    { id: 4, name: "Diana", status: "online", image: "https://placehold.co/40x40" },
    { id: 5, name: "Eve", status: "dnd", image: "https://placehold.co/40x40" },
  ];

  // Status colors
  const statusColors = {
    online: "bg-green-500",
    offline: "bg-gray-500",
    dnd: "bg-red-500"
  };
</script>

<Sidebar.Root class="w-64 border-l">
  <Sidebar.Header class="p-4 border-b">
    <h3 class="font-medium">Members ({members.length})</h3>
  </Sidebar.Header>

  <Sidebar.Content class="p-2">
    <Sidebar.Group>
      <Sidebar.Menu>
        {#each members as member (member.id)}
          <Sidebar.MenuItem>
            <Sidebar.MenuButton class="w-full justify-start gap-3">
              <div class="relative">
                <Avatar class="size-8">
                  <AvatarImage src={member.image} alt={member.name} />
                  <AvatarFallback>
                    <UserIcon class="size-4" />
                  </AvatarFallback>
                </Avatar>
                <span class={`absolute bottom-0 right-0 block size-2 rounded-full ring-1 ring-white ${statusColors[member.status]}`}></span>
              </div>
              <span class="truncate">{member.name}</span>
            </Sidebar.MenuButton>
          </Sidebar.MenuItem>
        {/each}
      </Sidebar.Menu>
    </Sidebar.Group>
  </Sidebar.Content>
</Sidebar.Root>
