import { Link, useLocation } from 'react-router-dom';
import { Network, Activity, List, Home } from 'lucide-react';
import { cn } from '../utils/helpers';

export default function Layout({ children }: { children: React.ReactNode }) {
  const location = useLocation();

  const navItems = [
    { path: '/', label: 'Dashboard', icon: Home },
    { path: '/network', label: 'Network Map', icon: Network },
    { path: '/hosts', label: 'Hosts', icon: List },
    { path: '/scans', label: 'Scans', icon: Activity },
  ];

  return (
    <div className="min-h-screen bg-slate-900 text-slate-100">
      {/* Header */}
      <header className="bg-slate-800 border-b border-slate-700">
        <div className="px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Network className="w-8 h-8 text-primary-500" />
              <div>
                <h1 className="text-xl font-bold">Network Scanner</h1>
                <p className="text-sm text-slate-400">Network Discovery & Visualization</p>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Navigation */}
      <nav className="bg-slate-800 border-b border-slate-700">
        <div className="px-6">
          <div className="flex space-x-1">
            {navItems.map((item) => {
              const Icon = item.icon;
              const isActive = location.pathname === item.path;
              return (
                <Link
                  key={item.path}
                  to={item.path}
                  className={cn(
                    'flex items-center space-x-2 px-4 py-3 text-sm font-medium transition-colors',
                    'border-b-2',
                    isActive
                      ? 'border-primary-500 text-primary-500'
                      : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-600'
                  )}
                >
                  <Icon className="w-4 h-4" />
                  <span>{item.label}</span>
                </Link>
              );
            })}
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="p-6">
        {children}
      </main>
    </div>
  );
}