import {
    TimelineConnector,
    TimelineContent,
    TimelineDot,
    TimelineItem,
    TimelineOppositeContent,
    TimelineSeparator,
} from "@mui/lab";
import DoneIcon from "@mui/icons-material/Done";
import { Typography } from "@mui/material";

const DoneTimeLine = ({ date, primaryLabel, secondaryLabel, position }) => {
    return (
        <TimelineItem>
            <TimelineOppositeContent sx={{ m: "auto 0" }} align="right" variant="body2" color="text.secondary">
                {date}
            </TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot color={"success"}>
                    <DoneIcon />
                </TimelineDot>
                {position !== "end" && <TimelineConnector />}
            </TimelineSeparator>
            <TimelineContent sx={{ py: "12px", px: 2 }}>
                <Typography variant="h6" component="span">
                    {primaryLabel}
                </Typography>
                <Typography variant="body2" color={"gray"}>
                    {secondaryLabel}
                </Typography>
            </TimelineContent>
        </TimelineItem>
    );
};

export default DoneTimeLine;