// components/HeaderClient.tsx
"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
// Use usePathname only if needed for active state logic not shown here
// import { usePathname } from "next/navigation";
import {
FiChevronDown,
FiClipboard,
FiArrowRight,
FiMenu,
FiX,
FiLogIn, // Import the login icon
} from "react-icons/fi";
import ThemeToggle from "./ThemeToggle"; // Assuming ThemeToggle component exists
import type { Session } from "@auth/core/types"; // Import Session type for props
const omsLogoUrl = "/oms-logo.svg"; // Ensure this is in your /public folder
// --- Basic Dropdown Component ---
// (Keep the DropdownMenu and DropdownLink component definitions here as before)
type DropdownMenuProps = {
trigger: React.ReactNode;
children: React.ReactNode;
menuClasses?: string;
};
const DropdownMenu = ({
trigger,
children,
menuClasses = "w-48",
}: DropdownMenuProps) => (
// Using group-focus-within for better keyboard/touch accessibility
{children}
);
type DropdownLinkProps = {
href: string;
children: React.ReactNode;
onClick?: () => void; // Added onClick for mobile menu closure
};
const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => (
{children}
);
// --- End Dropdown Component ---
// --- Define Props for the Client Component ---
type HeaderClientProps = {
session: Session | null; // Accept session from the server component
handleSignIn: () => void; // Pass sign-in handler
handleSignOut: () => void; // Pass sign-out handler
};
// --- The Main Client Component ---
const HeaderClient = ({
session,
handleSignIn,
handleSignOut,
}: HeaderClientProps) => {
// --- Client-side state and hooks ---
const [isMenuOpen, setIsMenuOpen] = useState(false);
// const pathname = usePathname() || "/"; // Uncomment if needed
// const isActive = (path: string) => pathname === path; // Uncomment if needed
const toggleMenu = () => setIsMenuOpen((open) => !open);
const handleMobileLinkClick = () => setIsMenuOpen(false);
const currentLogo = omsLogoUrl;
return (
// Use semantic variables for header background and border
{/* Top Row */}
{/* Logo */}
{/* Use semantic variable for text color */}
Owethu Managed Services
{/* Desktop Navigation */}
{/* Desktop Utilities */}