import { NavLink, Outlet } from 'react-router-dom';
import type { PartnerNavKind } from '../lib/partnerAccess';

const STORE_STAFF_TABS = [
  { to: '/', end: true, icon: 'dashboard', label: '首页' },
  { to: '/stores', icon: 'store', label: '门店管理' },
  { to: '/me', icon: 'person', label: '个人中心' },
] as const;

const WAREHOUSE_STAFF_TABS = [
  { to: '/', end: true, icon: 'dashboard', label: '首页' },
  { to: '/orders', icon: 'receipt_long', label: '订单管理' },
  { to: '/me', icon: 'person', label: '个人中心' },
] as const;

type SubAccountLayoutProps = {
  navKind: PartnerNavKind;
};

export default function SubAccountLayout({ navKind }: SubAccountLayoutProps) {
  const tabs = navKind === 'warehouse_staff' ? WAREHOUSE_STAFF_TABS : STORE_STAFF_TABS;

  return (
    <>
      <Outlet />
      <nav className="app-tabbar">
        {tabs.map((tab) => (
          <NavLink
            key={tab.to}
            to={tab.to}
            end={'end' in tab ? tab.end : undefined}
            className={({ isActive }) => `app-tabbar-item${isActive ? ' active' : ''}`}
          >
            <span className="material-symbols-outlined app-tabbar-icon">{tab.icon}</span>
            <span className="app-tabbar-label">{tab.label}</span>
          </NavLink>
        ))}
      </nav>
    </>
  );
}