'use client';

import NavList from "./NavList";
import { Bell, User } from 'lucide-react';

export default function Header() {
  const list_items = [
    { id: 1, name: "Dashboard", routeLink: "/" },
    { id: 2, name: "Brokers", routeLink: "/Brokers" },
    { id: 3, name: "Scan & Tracks", routeLink: "/Scan_Tracks" },
    { id: 4, name: "Positions", routeLink: "/Positions" },
    { id: 5, name: "AI Strategy Builder", routeLink: "/AIStrategyBuilder" },
  ];

  return (
    <div className="bg-gray-100 rounded-[2rem] mx-2 mt-2">
      <div className="flex justify-between items-center px-6 py-3">
        <div className="flex items-center gap-2">
          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-teal-500 rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-lg">H</span>
          </div>
          <span className="font-semibold text-xl text-gray-800">HookNest</span>
        </div>
        
        <NavList list_items={list_items} />
        
        <div className="flex items-center gap-4">
          <button className="p-2 hover:bg-gray-200 rounded-lg transition-colors">
            <Bell size={20} className="text-gray-600" />
          </button>
          <button className="p-2 hover:bg-gray-200 rounded-full transition-colors">
            <User size={20} className="text-gray-600" />
          </button>
        </div>
      </div>
    </div>
  );
}