import { PoResult } from "@/app/api/po";
import { arrayToDateString } from "@/app/utils/formatUtil";
import {
  Box,
  Button,
  Card,
  CardContent,
  Grid,
  Stack,
  Tab,
  Tabs,
  TabsProps,
  TextField,
  Typography,
} from "@mui/material";
import { useTranslation } from "react-i18next";
type Props = {
  // id?: number
  po: PoResult;
};

const PoInfoCard: React.FC<Props> = (
  {
    // id
    po
  },
) => {

  const { t } = useTranslation("purchaseOrder")
  return (
    <>
      <Card sx={{ display: "block", height: "230px" }}>
        <CardContent component={Stack} spacing={4}>
          <Box>
          <Stack spacing={2}>
              {/* 第一行：供应商 - 占据全宽 */}
              <TextField
                label={t("Supplier")}
                fullWidth
                disabled={true}
                value={po.supplier}
              />
              
              {/* 第二行：订单日期和预计到货日期 - 各占一半 */}
              <Grid container spacing={2}>
                <Grid item xs={6}>
                  <TextField
                    label={t("Order Date")}
                    fullWidth
                    disabled={true}
                    value={arrayToDateString(po.orderDate)}
                  />
                </Grid>
              <Grid item xs={6}>
                <TextField
                  // {
                  // ...register("name")
                  // }
                  label={t("ETA")}
                  fullWidth
                  disabled={true}
                  value={arrayToDateString(po.estimatedArrivalDate)}
                />
              </Grid>
            </Grid>
            </Stack>
          </Box>
        </CardContent>
      </Card>
    </>
  );
};
export default PoInfoCard;