import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Zap } from 'lucide-react';
import { Button } from "@/components/ui/button";

const MENU_ITEMS = [
    { label: 'Campaigns', href: '/' },
    { label: 'Contacts', href: '/contacts' },
    { label: 'Leads', href: '/leads' },
    { label: 'Deals', href: '/deals' },
];

function pathMatches(locationPath, href) {
    if (href === '/') return locationPath === '/';
    return locationPath === href || locationPath.startsWith(`${href}/`);
}

export default function AppHeader({ rightContent }) {
    const location = useLocation();

    return (
        <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
            <div className="mx-auto w-full max-w-none px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-4">
                <div className="flex items-center justify-between gap-4">
                    <div className="flex items-center gap-6">
                        <div className="flex items-center gap-3">
                            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
                                <Zap className="h-5 w-5 text-white" />
                            </div>
                            <div>
                                <h1 className="font-bold text-slate-800 text-lg">SequenceAI</h1>
                                <p className="text-xs text-slate-500">Personalized Email Outreach</p>
                            </div>
                        </div>
                        <nav className="hidden md:flex items-center gap-2">
                            {MENU_ITEMS.map((item) => {
                                const isActive = pathMatches(location.pathname, item.href);
                                return (
                                    <Button
                                        key={item.href}
                                        asChild
                                        variant={isActive ? "default" : "ghost"}
                                        size="sm"
                                        className={isActive ? "bg-violet-600 hover:bg-violet-700" : "text-slate-600"}
                                    >
                                        <Link to={item.href}>{item.label}</Link>
                                    </Button>
                                );
                            })}
                        </nav>
                    </div>
                    <div className="flex items-center gap-2">
                        {rightContent}
                    </div>
                </div>
                <nav className="md:hidden flex items-center gap-2 mt-3">
                    {MENU_ITEMS.map((item) => {
                        const isActive = pathMatches(location.pathname, item.href);
                        return (
                            <Button
                                key={item.href}
                                asChild
                                variant={isActive ? "default" : "outline"}
                                size="sm"
                                className={isActive ? "bg-violet-600 hover:bg-violet-700" : ""}
                            >
                                <Link to={item.href}>{item.label}</Link>
                            </Button>
                        );
                    })}
                </nav>
            </div>
        </header>
    );
}