import { TabBar } from 'antd-mobile';
import { AppOutline, FileOutline, PayCircleOutline, SoundOutline, UserOutline } from 'antd-mobile-icons';
import { useLocation, useNavigate } from 'react-router-dom';

const tabs = [
  { key: '/',          title: '홈',       icon: <AppOutline /> },
  { key: '/statement', title: '명세서',   icon: <FileOutline /> },
  { key: '/withdraw',  title: '출금',     icon: <PayCircleOutline /> },
  { key: '/notice',    title: '공지',     icon: <SoundOutline /> },
  { key: '/profile',   title: '내정보',   icon: <UserOutline /> },
];

export default function MobileTabBar() {
  const navigate = useNavigate();
  const location = useLocation();

  const activeKey = tabs
    .map((t) => t.key)
    .reduce((acc, k) => (location.pathname === k || (k !== '/' && location.pathname.startsWith(k)) ? k : acc), '/');

  return (
    <div
      style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        background: '#fff', borderTop: '1px solid #eee',
        paddingBottom: 'env(safe-area-inset-bottom, 0)',
        zIndex: 50,
      }}
    >
      <TabBar activeKey={activeKey} onChange={(k) => navigate(k)}>
        {tabs.map((t) => (
          <TabBar.Item key={t.key} icon={t.icon} title={t.title} />
        ))}
      </TabBar>
    </div>
  );
}
