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

export const FileAuctionWinner = ({ file }) => {
  const { killHouseWinner } = 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 variant="body1" fontWeight="bold">
                اطلاعات مزایده
              </TimelineOppositeContent>
            </Grid>
            <Grid>
              <TimelineContent color="textSecondary">
                <Typography variant="body2">
                  در این قسمت اطلاعات برنده خرید در مزایده را مشاهده می کنید.
                </Typography>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid>
            <SimpleTable
              columns={["نام خریدار", "تلفن خریدار", "استان/شهر", "قیمت خرید"]}
              data={[
                [
                  `${killHouseWinner.killHouseName} (${killHouseWinner.killHouseUserName})`,
                  killHouseWinner.killHouseUserMobile,
                  `${killHouseWinner.killHouseProvince}/${killHouseWinner.killHouseCity}`,
                  killHouseWinner.fee + " ﷼",
                ],
              ]}
            />
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};

FileAuctionWinner.propTypes = {
  file: PropTypes.object,
};
