<script setup lang="ts">
import { useRouter } from 'vue-router'
defineProps<{
  sidebarOpen: boolean
}>()
const router = useRouter()
function goHome() {
  router.push({ name: 'Home' })
}
</script>

<template>
  <!-- MOBILE MODE (below md) -->
  <div class="block md:hidden">
    <header class="flex items-center justify-between px-1 py-2 h-14 border-b border-border">
      <div class="flex items-center pl-3 cursor-pointer" @click="goHome">
        <i class="dku-icon-chevron-left-16 mr-2"></i>
        <span class="text-[14px] admin-text-primary">Back to Agent Hub</span>
      </div>
      <!-- <div class="flex items-center">
        <SidebarTrigger class="py-2 px-2 mx-1 text-gray-600 hover:text-primary-hover">
          <i class="dku-icon-left-panel-close-16"></i>
        </SidebarTrigger>
      </div> -->
    </header>
  </div>

  <!-- DESKTOP MODE (md and above) -->
  <div class="hidden md:flex h-[57px]">
    <div
      class="w-full flex justify-between items-center py-2.5"
      :class="{ 'border-border md:border-b': sidebarOpen }"
    >
      <template v-if="sidebarOpen">
        <div class="flex items-center pl-3 cursor-pointer" @click="goHome">
          <!-- <img
            src="@/assets/dataiku-logo.png"
            alt="Dataiku Logo"
            class="h-8 w-8 mr-2"
          /> -->
          <i class="dku-icon-chevron-left-16 mr-2"></i>
          <span class="text-[14px] admin-text-primary">Back to Agent Hub</span>
        </div>
      </template>

      <!-- <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <SidebarTrigger class="py-2 px-2 mx-1 w-[31px] admin-sidebar-item">
              <i v-if="sidebarOpen" class="dku-icon-left-panel-close-16"></i>
              <i v-else class="dku-icon-left-panel-open-16"></i>
            </SidebarTrigger>
          </TooltipTrigger>
          <TooltipContent :side-offset="10" hide-arrow side="right" v-if="!sidebarOpen">
            <p>Open sidebar</p>
          </TooltipContent>
          <TooltipContent :side-offset="10" hide-arrow side="right" v-if="sidebarOpen">
            <p>Close sidebar</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider> -->
    </div>
  </div>
</template>
