// components/Header.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,
} from "react-icons/fi";
import ThemeToggle from "./ThemeToggle"; // Assuming ThemeToggle component exists
const omsLogoUrl = "/oms-logo.svg"; // Ensure this is in your /public folder
// --- Basic Dropdown Component ---
// Using semantic variables for background, text, and borders
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}
);
// Dropdown Link component using semantic variables
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 ---
const Header = () => {
// If you need pathname for active states later:
// const pathname = usePathname() || "/";
// const isActive = (path: string) => pathname === path;
// const isActive = (path: string) => false; // Simple placeholder
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => setIsMenuOpen((open) => !open);
// Close menu when a link is clicked
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 */}
{/* Right Utilities (Desktop) */}
{/* Use semantic variables for button */}
Request Demo
{/* Mobile Buttons */}
{/* Theme toggle appears first */}
{/* Secondary Row */}
{" "}
{/* Keep gold background */}
{/* Hide on mobile */}
{/* Use primary-foreground for text color */}
{/* Use primary-foreground for link */}
Explore Our Offerings