import React from 'react';
import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Users, GraduationCap, UserCircle, BookOpen, Settings, LogOut } from 'lucide-react';

const links = [
  { icon: <LayoutDashboard className="w-5 h-5" />, label: 'Visão Geral', href: '/dashboard' },
  { icon: <Users className="w-5 h-5" />, label: 'Turmas', href: '/dashboard/turmas' },
  { icon: <GraduationCap className="w-5 h-5" />, label: 'Professores', href: '/dashboard/professores' },
  { icon: <UserCircle className="w-5 h-5" />, label: 'Alunos', href: '/dashboard/alunos' },
  { icon: <BookOpen className="w-5 h-5" />, label: 'Histórias', href: '/dashboard/historias' },
  { icon: <Settings className="w-5 h-5" />, label: 'Configurações', href: '/dashboard/configuracoes' },
  { icon: <LogOut className="w-5 h-5" />, label: 'Sair', href: '/logout' },
];

export function DashboardSidebar(): JSX.Element {
  return (
    <ul className="space-y-2 font-medium">
      {links.map((link) => (
        <li key={link.href}>
          <NavLink
            to={link.href}
            className={({ isActive }) => `
              flex items-center p-2 text-gray-900 rounded-lg dark:text-white 
              hover:bg-gray-100 dark:hover:bg-gray-700 group
              ${isActive ? 'bg-gray-100 dark:bg-gray-700' : ''}
            `}
          >
            <div className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
              {link.icon}
            </div>
            <span className="flex-1 ms-3 whitespace-nowrap">{link.label}</span>
          </NavLink>
        </li>
      ))}
    </ul>
  );
}