import { Grid, Typography } from "@mui/material";

function NationalMapGuidline() {
  return (
    <Grid
      xs={12}
      sx={{
        display: "flex",
        flexDirection: "rowReverse",
        border: "1px solid #A8A8A8",
        borderRadius: "20px",
        padding: "10px",
        gap: "5px",
        alignItems: "center",
        marginLeft: {
          xs: "0px",
          md: "173px",
        },
        width: {
          xs: "100%",
          md: "480px",
        },
      }}
    >
      <Grid
        xs={6}
        item
        sx={{
          display: "flex",
          alignItems: "center",
          marginLeft: "10px",
        }}
      >
        <Grid
          sx={{
            backgroundColor: "#F18989",
            width: "15px",
            height: "15px",
            borderRadius: "8px",
          }}
        ></Grid>
        <Typography
          sx={{
            marginLeft: "10px",
            color: "#717171",
            fontWeight: "400",
            fontSize: "14px",
          }}
        >
          کمتر از 25%
        </Typography>
      </Grid>

      <Grid
        xs={6}
        item
        sx={{
          display: "flex",
          alignItems: "center",
          marginLeft: "10px",
        }}
      >
        <Grid
          sx={{
            backgroundColor: "#FF944D",
            width: "15px",
            height: "15px",
            borderRadius: "8px",
          }}
        ></Grid>
        <Typography
          sx={{
            marginLeft: "10px",
            color: "#717171",
            fontWeight: "400",
            fontSize: "14px",
          }}
        >
          25% تا 50%
        </Typography>
      </Grid>
      <Grid
        xs={6}
        item
        sx={{
          display: "flex",
          alignItems: "center",
          marginLeft: "10px",
        }}
      >
        <Grid
          sx={{
            backgroundColor: "#F4C430",
            width: "15px",
            height: "15px",
            borderRadius: "8px",
          }}
        ></Grid>
        <Typography
          sx={{
            marginLeft: "10px",
            color: "#717171",
            fontWeight: "400",
            fontSize: "14px",
          }}
        >
          50% تا 75%
        </Typography>
      </Grid>
      <Grid
        xs={6}
        item
        sx={{
          display: "flex",
          alignItems: "center",
          marginLeft: "10px",
        }}
      >
        <Grid
          sx={{
            backgroundColor: "#61D8BA",
            width: "15px",
            height: "15px",
            borderRadius: "8px",
          }}
        ></Grid>
        <Typography
          sx={{
            marginLeft: "10px",
            color: "#717171",
            fontWeight: "400",
            fontSize: "14px",
          }}
        >
          75% تا 100%
        </Typography>
      </Grid>
    </Grid>
  );
}

export default NationalMapGuidline;
