import { NavLink } from 'react-router-dom'
import { IconHome, IconBooks, IconUsers, IconClipboard, IconTrophy, IconAlert } from './UI'

const links = [
  { to: '/',               label: 'Dashboard',      icon: <IconHome /> },
  { to: '/books',          label: 'Books',           icon: <IconBooks /> },
  { to: '/authors',        label: 'Authors',         icon: <IconUsers /> },
  { to: '/borrows',        label: 'Borrow Records',  icon: <IconClipboard /> },
]

const reports = [
  { to: '/top-borrowed',   label: 'Top Authors',     icon: <IconTrophy /> },
  { to: '/overdue',        label: 'Overdue Report',  icon: <IconAlert /> },
]

export default function Sidebar() {
  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <h1>Biblioteca</h1>
        <span>Library Management</span>
      </div>

      <div className="sidebar-section">
        <p className="sidebar-section-label">Main</p>
        {links.map(({ to, label, icon }) => (
          <NavLink
            key={to}
            to={to}
            end={to === '/'}
            className={({ isActive }) => `nav-link${isActive ? ' active' : ''}`}
          >
            {icon}
            {label}
          </NavLink>
        ))}
      </div>

      <div className="sidebar-section" style={{ marginTop: 16 }}>
        <p className="sidebar-section-label">Reports</p>
        {reports.map(({ to, label, icon }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) => `nav-link${isActive ? ' active' : ''}`}
          >
            {icon}
            {label}
          </NavLink>
        ))}
      </div>
    </aside>
  )
}
