<template>
  <!-- Topbar -->
  <div
    class="sticky top-0 z-40 flex h-16 items-center gap-x-4 border-b bg-white px-4 shadow-sm dark:bg-gray-800 dark:border-gray-700 sm:gap-x-6 sm:px-6 lg:px-8"
  >
    <!-- Mobile hamburger -->
    <button
      type="button"
      class="-m-2.5 p-2.5 text-gray-700 lg:hidden dark:text-gray-300"
      @click="$emit('toggle-sidebar')"
    >
      <span class="sr-only">Open sidebar</span>
      <Bars3Icon class="h-6 w-6" aria-hidden="true" />
    </button>

    <!-- Divider for mobile -->
    <div
      class="h-6 w-px bg-gray-900/10 lg:hidden dark:bg-gray-100/10"
      aria-hidden="true"
    />

    <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
      <!-- Search -->
      <AppCmsSearchBar />

      <!-- Notifications & Upload -->
      <div class="flex items-center gap-x-4 lg:gap-x-6">
        <button
          type="button"
          class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
        >
          <span class="sr-only">View notifications</span>
          <BellIcon class="h-6 w-6" aria-hidden="true" />
        </button>

        <div
          class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10 dark:lg:bg-gray-100/10"
          aria-hidden="true"
        />

        <AppCmsUploadSelector />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Bars3Icon, BellIcon } from '@heroicons/vue/24/outline';
import AppCmsSearchBar from './slots/CmsSearchBar.vue';
import AppCmsUploadSelector from './slots/CmsUploadSelector.vue';

// you can still react to `props.open` here if needed for styling
</script>
