---
import { Menu } from "lucide-react";


interface Props {
  title: string;
}

const { title } = Astro.props;
---

<header
  class="bg-white border-b px-1 md:px-6 lg:px-8 h-16 flex items-center justify-between"
>
  <!-- LEFT -->
  <div class="flex items-center gap-4">
    <!-- BOTON MOBILE -->
    <button
      class="lg:hidden p-2 rounded-md hover:bg-gray-100"
      onclick="openSidebar()"
    >
      <Menu />
    </button>

    <h1 class="hidden md:block text-lg font-semibold">
      {title}
    </h1>
  </div>

  <!-- RIGHT (Filtros dinámicos) -->
  <div class="flex items-center gap-3 w-full md:w-auto">
    <slot />
  </div>
</header>