"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;