'use client';

import { 
  Share2, 
  Download, 
  Code, 
  ChevronRight,
  Plus,
  Menu
} from 'lucide-react';

interface DashboardHeaderProps {
  title?: string;
  subtitle?: string;
  showActions?: boolean;
  onMenuToggle?: () => void;
}

export function DashboardHeader({ 
  title = 'Overview', 
  subtitle = 'Lead Performance', 
  showActions = true,
  onMenuToggle
}: DashboardHeaderProps) {
  return (
    <header className="h-auto lg:h-[80px] border-b border-[#f0f0f0] bg-white/80 backdrop-blur-md sticky top-0 z-40 px-4 lg:px-10 py-4 lg:py-0 flex flex-col lg:flex-row lg:items-center justify-between font-sans gap-4 lg:gap-0">
      <div className="flex items-center justify-between w-full lg:w-auto">
        {/* Mobile Menu Toggle */}
        <button 
          onClick={onMenuToggle}
          className="lg:hidden p-2 -ml-2 rounded-full hover:bg-slate-50 text-slate-900 transition-all"
        >
          <Menu className="w-5 h-5" />
        </button>

        {/* Breadcrumbs & Title */}
        <div className="flex items-center gap-2 lg:gap-4">
          <div className="hidden sm:flex items-center gap-2 text-[10px] lg:text-[12px] font-bold text-slate-400 uppercase tracking-widest">
            <span>Project</span>
            <ChevronRight className="w-3 h-3" />
            <span className="text-slate-900">LeadForge</span>
          </div>
          
          <div className="hidden sm:block h-4 w-px bg-slate-100 mx-1 lg:mx-2" />
          
          <div className="flex items-center gap-2 lg:gap-3">
            <h1 className="text-[16px] lg:text-[20px] font-medium text-slate-900 tracking-tight">{title}</h1>
            <span className="hidden xs:inline font-serif italic text-[14px] lg:text-[16px] text-slate-400 opacity-80 lowercase">
              — {subtitle}
            </span>
          </div>
        </div>

        {/* Mobile Actions Spacer */}
        <div className="lg:hidden w-8" />
      </div>

      {/* Actions */}
      {showActions && (
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-1">
            <button className="flex items-center gap-2 px-4 py-2 text-slate-500 hover:text-slate-900 transition-all text-xs font-bold">
              <Code className="w-3.5 h-3.5" />
              API
            </button>
            <button className="flex items-center gap-2 px-4 py-2 text-slate-500 hover:text-slate-900 transition-all text-xs font-bold">
              <Share2 className="w-3.5 h-3.5" />
              Share
            </button>
          </div>
          
          <div className="w-px h-6 bg-slate-100 mx-1" />
          
          <button className="flex items-center gap-2 px-6 py-2.5 bg-[#121212] text-white hover:bg-black rounded-full text-xs font-bold transition-all shadow-glossy-inner active:scale-[0.98]">
             <Download className="w-3.5 h-3.5" />
             Export
          </button>
        </div>
      )}
    </header>
  );
}
