import { NAV_ITEMS } from '../constants'
import { usePosStore } from '../store/usePosStore'

export default function Sidebar() {
  const activePage = usePosStore((s) => s.activePage)
  const setPage = usePosStore((s) => s.setPage)

  return (
    <div className="sidebar">
      {NAV_ITEMS.map((sec) => (
        <div key={sec.section} className="sidebar-section">
          <div className="sidebar-label">{sec.section}</div>
          {sec.items.map((item) => (
            <button
              key={item.id}
              type="button"
              className={`nav-item${activePage === item.id ? ' active' : ''}`}
              onClick={() => setPage(item.id)}
            >
              <span className="ni-icon">{item.icon}</span>
              {item.label}
            </button>
          ))}
        </div>
      ))}
    </div>
  )
}
