import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Typography } from "@mui/material";
import React from "react";
// import { formatTime } from "../../../../utils/formatTime";
import { PropTypes } from "prop-types";
import { Grid } from "../../../../components/grid/Grid";

import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { SPACING } from "../../../../data/spacing";

const SlaughterPayProvinceFactor = ({ file }) => {
  return (
    <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
      <TimelineSeparator>
        <TimelineDot />
        <TimelineConnector />
      </TimelineSeparator>
      <Grid container direction="column" flexWrap="nowrap" flex="1">
        <Grid container>
          <Grid>
            <TimelineOppositeContent>
              <Typography variant="body1" fontWeight="bold">
                مرحله صدور فاکتور توسط استان
              </Typography>
            </TimelineOppositeContent>
          </Grid>
          <Grid>
            <TimelineContent color="textSecondary">
              <Grid container gap={SPACING.SMALL}>
                <Typography variant="body2" display="flex" gap={SPACING.SMALL}>
                  در این مرحله اطلاعات مربوط به فاکتور های صادر شده توسط استان
                  را مشاهده می کنید.
                </Typography>
              </Grid>
            </TimelineContent>
          </Grid>
        </Grid>
        <Grid container>
          <Grid xs={12}>
            <SimpleTable
              columns={[
                "کدبار",
                "وزن ماشین بدون بار",
                "وزن ماشین با بار",
                "وزن بار",
              ]}
              data={[
                ["1000020 کد", "2000 کیلوگرم", "3200 کیلوگرم", "1000 کیلوگرم"],
              ]}
            />
          </Grid>
        </Grid>
      </Grid>
    </TimelineItem>
  );
};
SlaughterPayProvinceFactor.propTypes = {
  file: PropTypes.object,
};

export default SlaughterPayProvinceFactor;
