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

const OpenTimeLine = ({date, primaryLabel, secondaryLabel, position}) => {
    return (
        <TimelineItem>
            <TimelineOppositeContent
                sx={{m: 'auto 0'}}
                variant="body2"
                color="text.secondary"
            >{date}</TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot>
                    <CallMadeIcon/>
                </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 OpenTimeLine