'use client';

import Image from 'next/image';
import Link from 'next/link';

interface NavItem {
  label: string;
  href: string;
  icon: string;
  isActive?: boolean;
}

const navItems: NavItem[] = [
  {
    label: 'Connections',
    href: '/agent/network/connections',
    icon: '/assets/icons/people-icon.svg',
    isActive: true,
  },
];

export function NetworkSidebar() {
  return (
    <div className="border border-[#00293d] rounded-[7px] p-4 w-full lg:w-[280px] bg-white h-fit">
      <h2 className="font-fractul font-medium text-[20px] leading-[24px] text-[#00293D] mb-4">
        Manage my network
      </h2>

      <div className="w-full h-0 border-t border-[#00293d]/30 mb-4" />

      <nav className="space-y-3">
        {navItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center gap-3 py-2 px-1 rounded transition-colors cursor-pointer ${
              item.isActive
                ? 'text-[#00293D]'
                : 'text-[#00293D]/70 hover:text-[#00293D]'
            }`}
          >
            <Image
              src={item.icon}
              alt={item.label}
              width={31}
              height={31}
            />
            <span className="font-serif font-normal text-[14px] leading-[19px]">
              {item.label}
            </span>
          </Link>
        ))}
      </nav>
    </div>
  );
}
