src/components/organisms/Header/index.tsx

"use client";

import React from "react";
import Navigation from "@/components/organisms/Navigation"; // make sure this exists
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@/components/atoms/Tooltip";
import { cn } from "@/lib/utils"; // your utility for classnames

const Header: React.FC = () => {
  return (
    <header
      className={cn(
        "w-full flex items-center justify-between px-4 py-2 border-b bg-white shadow-sm sticky top-0 z-30"
      )}
    >
      {/* Left: Navigation */}
      <Navigation />

      {/* Right: Example buttons with tooltips */}
      <div className="flex items-center gap-4">
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger>
              <button className="px-3 py-1 rounded bg-gray-100 hover:bg-gray-200">
                Help
              </button>
            </TooltipTrigger>
            <TooltipContent>Get help and documentation</TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger>
              <button className="px-3 py-1 rounded bg-gray-100 hover:bg-gray-200">
                Profile
              </button>
            </TooltipTrigger>
            <TooltipContent>View your profile</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
    </header>
  );
};

export default Header;