import { CheckSquare, FolderKanban, Home, TimerReset } from 'lucide-react';
import { NavLink } from 'react-router-dom';
import PwaQuickAction from './PwaQuickAction';

const items = [
  { to: '/pwa', end: true, label: 'خانه', icon: Home },
  { to: '/pwa/tasks', label: 'تسک‌ها', icon: CheckSquare },
  { to: '/pwa/projects', label: 'پروژه‌ها', icon: FolderKanban },
  { to: '/pwa/sprint', label: 'اسپرینت', icon: TimerReset },
];

export default function PwaBottomNav({ user }) {
  const renderItem = ({ to, end, label, icon: Icon }) => (
    <NavLink key={to} to={to} end={end} className={({ isActive }) => `pwa-nav-item ${isActive ? 'active' : ''}`}>
      <span className="pwa-nav-icon-wrap">
        <Icon size={19} />
      </span>
      <span>{label}</span>
    </NavLink>
  );

  return (
    <nav className="pwa-bottom-nav" aria-label="ناوبری موبایل">
      {items.slice(0, 2).map(renderItem)}
      <PwaQuickAction user={user} variant="nav" />
      {items.slice(2).map(renderItem)}
    </nav>
  );
}
