<script lang="ts">
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
  import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
  import UserIcon from '@lucide/svelte/icons/user';
  import LogOutIcon from '@lucide/svelte/icons/log-out';
  import SettingsIcon from '@lucide/svelte/icons/settings';
  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';

  const user = {
    name: 'Operator',
    email: 'operator@example.com',
    avatar: '',
  };
</script>

<Sidebar.Menu>
  <Sidebar.MenuItem>
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        {#snippet child({ props })}
          <button
            {...props}
            class="flex w-full items-center gap-2 rounded-md p-2 text-sm outline-none hover:bg-sidebar-accent"
          >
            <span class="bg-muted flex size-7 items-center justify-center rounded-md">
              <UserIcon class="size-4" />
            </span>
            <div class="flex flex-col text-left">
              <span class="text-sm font-medium">{user.name}</span>
              <span class="text-xs text-muted-foreground">{user.email}</span>
            </div>
            <ChevronUpIcon class="ml-auto size-4" />
          </button>
        {/snippet}
      </DropdownMenu.Trigger>
      <DropdownMenu.Content side="top" class="w-56">
        <DropdownMenu.Group>
          <DropdownMenu.Item href="/settings">
            <SettingsIcon class="size-4" />
            Settings
          </DropdownMenu.Item>
          <DropdownMenu.Item>
            <UserIcon class="size-4" />
            Profile
          </DropdownMenu.Item>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>
          <LogOutIcon class="size-4" />
          Sign out
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  </Sidebar.MenuItem>
</Sidebar.Menu>