import { preloadInventory } from "@/app/api/inventory";
import InventorySearch from "@/components/InventorySearch";
import { I18nProvider, getServerI18n } from "@/i18n";
import { Stack, Typography } from "@mui/material";
import { Metadata } from "next";
import { Suspense } from "react";

export const metadata: Metadata = {
    title: "Inventory"
}

const Inventory: React.FC = async () => {
    const { t } = await getServerI18n("inventory", "common")

    preloadInventory()

    return <>
        <Stack
            direction="row"
            justifyContent={"space-between"}
            flexWrap={"wrap"}
            rowGap={2}
        >
            <Typography variant="h4" marginInlineEnd={2}>
                {t("Inventory")}
            </Typography>
        </Stack>
        <I18nProvider namespaces={["common", "inventory"]}>
            <Suspense fallback={<InventorySearch.Loading />}>
                <InventorySearch />
            </Suspense>
        </I18nProvider>
    </>;
}

export default Inventory;