"use client";

import {Box, Typography} from "@mui/material";
import TextSnippetIcon from '@mui/icons-material/TextSnippet';
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
import {
    Timeline,
    TimelineConnector,
    TimelineContent,
    TimelineDot,
    TimelineItem,
    timelineItemClasses,
    TimelineSeparator
} from "@mui/lab";

const CreateTimeLine = ({tabState}) => {
    return (
        <Box sx={{display: "flex", alignItems: "center"}}>
            <Timeline position="right" sx={{
                [`& .${timelineItemClasses.root}:before`]: {flex: 0, padding: 0}
            }}>
                <TimelineItem>
                    <TimelineSeparator>
                        <TimelineConnector/>
                        <TimelineDot sx={{backgroundColor: "#fff"}}>
                            <TravelExploreIcon color={tabState === 0 ? "primary" : "error"}
                                               sx={{width: "1.5rem", height: "1.5rem"}}/>
                        </TimelineDot>
                        <TimelineConnector/>
                    </TimelineSeparator>
                    <TimelineContent sx={{py: '12px', px: 2}}>
                        <Typography variant="h6">
                            نقشه
                        </Typography>
                        <Typography variant="caption" sx={{color: "#606060"}}>ثبت مختصات محل
                            آزمایش</Typography>
                    </TimelineContent>
                </TimelineItem>
                <TimelineItem>
                    <TimelineSeparator>
                        <TimelineConnector/>
                        <TimelineDot sx={{backgroundColor: "#fff"}}>
                            <TextSnippetIcon color={tabState === 1 ? "primary" : "error"}
                                             sx={{width: "1.5rem", height: "1.5rem"}}/>
                        </TimelineDot>
                        <TimelineConnector/>
                    </TimelineSeparator>
                    <TimelineContent sx={{py: '12px', px: 2}}>
                        <Typography variant="h6">
                            مشخصات آزمایش
                        </Typography>
                        <Typography variant="caption" sx={{color: "#606060"}}>ثبت مشخصات اولیه</Typography>
                    </TimelineContent>
                </TimelineItem>
            </Timeline>
        </Box>
    );
};
export default CreateTimeLine;