<script setup lang="ts">
import { SidebarTrigger } from '@/components/ui/sidebar'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useSidebar } from '@/components/ui/sidebar'
import { computed } from 'vue'

const { open, openMobile, isMobile } = useSidebar()
const isSidebarOpen = computed(() => (isMobile.value ? openMobile.value : open.value))

defineEmits<{
  (e: 'new-conversation'): void
  (e: 'view-library'): void
}>()
</script>

<template>
  <!-- MOBILE MODE (below md) -->
  <div class="block md:hidden">
    <template v-if="!isSidebarOpen">
      <header class="flex items-center px-1">
        <div class="flex items-center">
          <Tooltip>
            <TooltipTrigger asChild>
              <SidebarTrigger class="py-2 px-2 mx-1 hover:text-primary-hover">
                <i class="dku-icon-left-panel-open-16 text-gray-600"></i>
              </SidebarTrigger>
            </TooltipTrigger>
            <TooltipContent>Open Panel</TooltipContent>
          </Tooltip>
        </div>
      </header>
    </template>
    <template>
      <header class="flex items-center justify-between px-1">
        <!-- Empty header when sidebar is open on mobile -->
        <div></div>
      </header>
    </template>
  </div>

  <!-- DESKTOP MODE (md and above) -->
  <div class="hidden md:flex h-full">
    <header class="flex flex-col items-start justify-between px-1 w-full"></header>
  </div>
</template>
