import React from 'react';
import { Radar, ChevronLeft } from 'lucide-react';

interface HeaderProps {
  onBack?: () => void;
  showBack?: boolean;
}

export const Header: React.FC<HeaderProps> = ({ onBack, showBack }) => {
  return (
    <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <div className="flex items-center gap-4">
          {showBack && onBack && (
            <button 
              onClick={onBack}
              className="p-1 hover:bg-slate-100 rounded-full text-slate-500 transition-colors"
              aria-label="Go back"
            >
              <ChevronLeft size={24} />
            </button>
          )}
          <div className="flex items-center gap-2">
            <div className="bg-indigo-600 p-2 rounded-lg text-white">
              <Radar size={24} />
            </div>
            <div>
              <h1 className="text-xl font-bold text-slate-900 tracking-tight">Prospects <span className="font-normal text-slate-500">Intel</span></h1>
            </div>
          </div>
        </div>
        <div className="text-sm text-slate-500 font-medium hidden sm:block">
          B2B Market Intelligence Agent
        </div>
      </div>
    </header>
  );
};