"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 
  LayoutDashboard, 
  Users, 
  MessageSquare, 
  BookOpen, 
  LogOut,
  ShieldCheck,
  BarChart3
} from 'lucide-react';

const menuItems = [
  { name: 'Dashboard', icon: LayoutDashboard, href: '/dashboard' },
  { name: 'Entrepreneurs', icon: ShieldCheck, href: '/entrepreneurs' },
  { name: 'Metrics & Analytics', icon: BarChart3, href: '/metrics' },
  { name: 'Commentaires', icon: MessageSquare, href: '/comments' },
  { name: 'Blog & Interviews', icon: BookOpen, href: '/blog' },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <div className="admin-sidebar p-6 flex flex-col">
      <div className="flex items-center gap-3 mb-10 px-2">
        <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
          <ShieldCheck className="text-white" />
        </div>
        <h1 className="text-xl font-bold tracking-tight text-white">AfroAdmin</h1>
      </div>

      <nav className="flex-1 space-y-1">
        {menuItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link 
              key={item.name} 
              href={item.href}
              className={`nav-link ${isActive ? 'active' : ''}`}
            >
              <item.icon className="w-5 h-5 mr-3" />
              <span>{item.name}</span>
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto pt-6 border-t border-slate-700">
        <button className="nav-link w-full text-left text-red-400 hover:bg-red-950/30">
          <LogOut className="w-5 h-5 mr-3" />
          <span>Déconnexion</span>
        </button>
      </div>
    </div>
  );
}