import { NavLink } from 'react-router-dom'
import { useState } from 'react'

const NAV = [
  { to: '/operations', icon: '📊', label: 'Διοίκηση' },
  { to: '/tables',     icon: '🪑', label: 'Τραπέζια' },
  { to: '/reports',    icon: '📋', label: 'Αναφορές' },
  { to: '/management', icon: '🗂️', label: 'Διαχείριση' },
  { to: '/settings',   icon: '⚙️', label: 'Ρυθμίσεις' },
]

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

  return (
    <aside className={`flex flex-col bg-primary-800 text-white shrink-0 transition-all duration-200 ${collapsed ? 'w-16' : 'w-56'}`}>
      {/* Logo / collapse toggle */}
      <div className="flex items-center justify-between px-4 py-4 border-b border-primary-700">
        {!collapsed && <span className="font-bold text-lg tracking-wide">POS</span>}
        <button
          onClick={() => setCollapsed(c => !c)}
          className="p-1 rounded hover:bg-primary-700 transition-colors ml-auto"
          aria-label="Toggle sidebar"
        >
          {collapsed ? '→' : '←'}
        </button>
      </div>

      <nav className="flex-1 py-4 space-y-1 px-2">
        {NAV.map(({ to, icon, label }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
              `flex items-center gap-3 px-3 py-3 rounded-lg font-medium transition-colors min-h-[44px] ` +
              (isActive ? 'bg-primary-600 text-white' : 'text-primary-100 hover:bg-primary-700')
            }
          >
            <span className="text-xl leading-none shrink-0">{icon}</span>
            {!collapsed && <span className="text-sm">{label}</span>}
          </NavLink>
        ))}
      </nav>
    </aside>
  )
}
