import { NavLink, Outlet } from 'react-router-dom';

const TABS = [
  { to: '/', end: true, icon: 'home', label: '首页', fillActive: false },
  { to: '/stores', icon: 'storefront', label: '门店', fillActive: true },
  { to: '/benefit', icon: 'card_giftcard', label: '好客权益', fillActive: false },
  { to: '/mine', icon: 'person', label: '我的', fillActive: true },
] as const;

export default function TabLayout() {
  return (
    <>
      <Outlet />
      <nav className="app-tabbar">
        {TABS.map((tab) => (
          <NavLink
            key={tab.to}
            to={tab.to}
            end={tab.end}
            className={({ isActive }) => `app-tabbar-item${isActive ? ' active' : ''}`}
          >
            {({ isActive }) => (
              <>
                <span
                  className="material-symbols-outlined app-tabbar-icon"
                  style={
                    isActive && tab.fillActive
                      ? { fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24" }
                      : undefined
                  }
                >
                  {tab.icon}
                </span>
                <span className="app-tabbar-label">{tab.label}</span>
              </>
            )}
          </NavLink>
        ))}
      </nav>
    </>
  );
}