"use client";

import { Box, Tab, Tabs, Typography } from "@mui/material";
import React from "react";
import { useTranslation } from "react-i18next";
import PickOrderSequenceTab from "./PickOrderSequenceTab";

export default function FinishedGoodManagementPage() {
  const { t } = useTranslation("finishedgoodmanagement");
  const [tab, setTab] = React.useState(0);

  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ p: 1, borderBottom: "1px solid", borderColor: "divider" }}>
        <Typography variant="h5" sx={{ lineHeight: 1.4, m: 0, fontWeight: 500 }}>
          {t("Finished Good Management")}
        </Typography>
      </Box>

      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs value={tab} onChange={(_e, v) => setTab(v)} variant="scrollable">
          <Tab label={t("提料順序")} />
        </Tabs>
      </Box>

      <Box sx={{ p: 2 }}>
        {tab === 0 && <PickOrderSequenceTab />}
      </Box>
    </Box>
  );
}

