'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';

const menuItems = [
  { href: '/dashboard', icon: 'fas fa-home', label: 'Dashboard' },
  { href: '/leads', icon: 'fas fa-users', label: 'Leads' },
  { href: '/cotizaciones', icon: 'fas fa-file-invoice-dollar', label: 'Cotizaciones' },
  { href: '/cursos', icon: 'fas fa-book', label: 'Cursos' },
  { href: '/alumnos', icon: 'fas fa-user-graduate', label: 'Alumnos' },
  { href: '/arqueo', icon: 'fas fa-cash-register', label: 'Arqueo' },
  { href: '/empresas', icon: 'fas fa-building', label: 'Empresas' },
  { href: '/reportes/ventas', icon: 'fas fa-chart-bar', label: 'Reportes' },
  { href: '/autorizador', icon: 'fas fa-check-double', label: 'Autorizador' },
  { href: '/contacto', icon: 'fas fa-envelope', label: 'Contacto' },
];

export default function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
      <div className="logo-details">
        <img className="icon" src="/img/favicon.png" width="60" alt="SAM" />
        <div className="logo_name">SAM</div>
        <i className="bx bx-menu" id="btn" onClick={() => setCollapsed(!collapsed)}></i>
      </div>
      <ul className="nav-list">
        {menuItems.map(item => (
          <li key={item.href} className={pathname.startsWith(item.href) ? 'active' : ''}>
            <Link href={item.href}>
              <i className={item.icon}></i>
              <span className="links_name">{item.label}</span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}