import React from 'react';
import { Plus, Network, Scan } from 'lucide-react';

interface HeaderProps {
  onAddService: () => void;
  onScanNetwork: () => void;
}

const Header: React.FC<HeaderProps> = ({ onAddService, onScanNetwork }) => {
  return (
    <header className="bg-gray-800/50 backdrop-blur-sm sticky top-0 z-10 shadow-md">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-20">
          <div className="flex items-center">
            <Network className="h-8 w-8 text-teal-400" />
            <h1 className="ml-3 text-2xl font-bold text-gray-100 tracking-tight">
              Local Dashboard
            </h1>
          </div>
          <div className="flex items-center space-x-3">
            <button
              onClick={onScanNetwork}
              type="button"
              className="inline-flex items-center px-4 py-2 border border-gray-600 text-sm font-medium rounded-md shadow-sm text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-teal-500 transition-colors"
            >
              <Scan className="-ml-1 mr-2 h-5 w-5" />
              Scan Network
            </button>
            <button
              onClick={onAddService}
              type="button"
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-500 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-teal-500 transition-colors"
            >
              <Plus className="-ml-1 mr-2 h-5 w-5" />
              Add Service
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;