import { preloadProjectExpenses } from "@/app/api/projectExpenses"
import ExpenseSearch from "@/components/ExpenseSearch"
import { getServerI18n, I18nProvider } from "@/i18n"
import { Stack, Typography } from "@mui/material"
import { Suspense } from "react"

const Expense: React.FC = async () => {
  preloadProjectExpenses()
    const { t } = await getServerI18n("expense")

    return(

        <Stack
          justifyContent="space-between"
          flexWrap="wrap"
          rowGap={2}
        >
          <Typography variant="h4" marginInlineEnd={2}>
            {t("Expense")}
          </Typography>
          <Suspense fallback={<ExpenseSearch.Loading />}>
          <I18nProvider namespaces={["expense", "common"]}>
            <ExpenseSearch />
          </I18nProvider>
          </Suspense>
        </Stack>

    )
}

export default Expense