"use client"; import { useState, useRef, useEffect } from "react"; import { useRouter } from "next/navigation"; import { Heart, MessageCircle, Package, Plus, Menu, ChevronDown, Store, User, ChevronLeft, MapPin, } from "lucide-react"; import { useMarketplaceContext } from "@/contexts/marketplace/MarketplaceContext"; import { useWishlist } from "@/lib/WishlistContext"; import { useMessaging } from "@/lib/MessagingContext"; import { useLocation } from "@/hooks/useLocation"; import Image from "next/image"; import { IMAGES, TEXT } from "@/branding"; export function MarketplaceHeader() { const router = useRouter(); const { mode, setMode, openMobileSidebar } = useMarketplaceContext(); const { count: wishlistCount } = useWishlist(); const { totalUnread } = useMessaging(); const { location, isLoading: locationLoading, requestLocation, } = useLocation(); const [modeOpen, setModeOpen] = useState(false); const modeRef = useRef(null); useEffect(() => { if (!modeOpen) return; const handler = (e: MouseEvent) => { if (modeRef.current && !modeRef.current.contains(e.target as Node)) setModeOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [modeOpen]); return (
{/* ── Desktop layout ──────────────────────────────────────────────────── */}
{/* LEFT: back + logo */}
{/* CENTER: location indicator */}
{locationLoading ? (
Detecting location…
) : location ? ( ) : ( )}
{/* RIGHT: mode switcher + icons + sell */}
{/* Mode switcher */}
{modeOpen && (
{(["buyer", "seller"] as const).map((m) => ( ))}
)}
{/* Icon group */}
router.push("/marketplace/wishlist")} label="Wishlist" badge={wishlistCount} > router.push("/marketplace/messages")} label="Messages" badge={totalUnread} badgeColor="#22c55e" > router.push("/marketplace/orders")} label="Orders" > router.push("/marketplace/profile")} label="Profile" >
{/* Sell CTA */}
{/* ── Mobile layout ────────────────────────────────────────────────────── */}
{/* Back to Social Network */}
{/* Location sub-label on mobile */} {location && !locationLoading && ( )}
{wishlistCount > 0 && ( {wishlistCount > 9 ? "9+" : wishlistCount} )}
); } /* ── Icon button with optional badge ─────────────────────────────────────── */ function IconBtn({ children, onClick, label, badge, badgeColor = "var(--accent)", }: { children: React.ReactNode; onClick: () => void; label: string; badge?: number; badgeColor?: string; }) { return ( ); }