"use client";

import { useState, useCallback, useEffect } from "react";
import ExpensesListPage from "./ExpensesListPage";
import ExpensesNewPage from "./ExpensesNewPage";

type ViewType = "list" | "new";

export default function ExpensesShell() {
  const [view, setView] = useState<ViewType>("list");

  const goToList = useCallback(() => setView("list"), []);
  const goToNew = useCallback(() => setView("new"), []);
  const handleCreated = useCallback(() => goToList(), [goToList]);

  return (
    <>
      {view === "list" && <ExpensesListPage onAddExpense={goToNew} />}
      {view === "new" && <ExpensesNewPage onBack={goToList} onSuccess={handleCreated} />}
    </>
  );
}