import { Route, Routes } from 'react-router-dom';
import RequireAuth from '@/components/RequireAuth';
import MobileTabBar from '@/components/TabBar';
import Login from '@/pages/Login';
import Home from '@/pages/Home';
import StatementList from '@/pages/StatementList';
import StatementDetail from '@/pages/StatementDetail';
import WithdrawList from '@/pages/WithdrawList';
import WithdrawCreate from '@/pages/WithdrawCreate';
import NoticeList from '@/pages/NoticeList';
import Profile from '@/pages/Profile';

function AuthedLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <MobileTabBar />
    </>
  );
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route
        path="/"
        element={
          <RequireAuth>
            <AuthedLayout><Home /></AuthedLayout>
          </RequireAuth>
        }
      />
      <Route
        path="/statement"
        element={
          <RequireAuth>
            <AuthedLayout><StatementList /></AuthedLayout>
          </RequireAuth>
        }
      />
      <Route
        path="/statement/:statementId"
        element={
          <RequireAuth>
            <StatementDetail />
          </RequireAuth>
        }
      />
      <Route
        path="/withdraw"
        element={
          <RequireAuth>
            <AuthedLayout><WithdrawList /></AuthedLayout>
          </RequireAuth>
        }
      />
      <Route
        path="/withdraw/new"
        element={
          <RequireAuth>
            <WithdrawCreate />
          </RequireAuth>
        }
      />
      <Route
        path="/notice"
        element={
          <RequireAuth>
            <AuthedLayout><NoticeList /></AuthedLayout>
          </RequireAuth>
        }
      />
      <Route
        path="/profile"
        element={
          <RequireAuth>
            <AuthedLayout><Profile /></AuthedLayout>
          </RequireAuth>
        }
      />
    </Routes>
  );
}
