import {
  Box,
  Grid,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Skeleton,
  Typography,
} from "@mui/material";
import React from "react";
import {
  BTNbox,
  BusinessVerifiedouterBox,
  FromSection,
  Heading,
  VerifiedHeading,
  VerifiedInnerBox,
  VerifySection,
} from "./styles";
import CheckIcon from "@mui/icons-material/Check";

export default function BusniessVerifiedSkeleton() {
  return (
    <>
      <Box>
        <BusinessVerifiedouterBox>
          <VerifiedInnerBox>
            <VerifiedHeading>
              <>
                <Skeleton
                  animation="wave"
                  variant="text"
                  width={"40%"}
                  height={"54px"}
                />
              </>
            </VerifiedHeading>
            <VerifySection>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={12} md={4} lg={4}>
                  <Box className="Section-One">
                    <Box className="center">
                      <Box>
                        <Skeleton
                          animation="wave"
                          variant="rounded"
                          width={"145px"}
                          height={"50px"}
                        />
                      </Box>
                    </Box>
                    <Box className="content">
                      <Typography className="subheading">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"30%"}
                        />
                      </Typography>
                      <Typography className="subtext">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"100%"}
                        />
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"30%"}
                        />
                      </Typography>
                      <Typography className="subheading">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"40%"}
                        />
                      </Typography>
                      <Box>
                        <List>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"70%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"30%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"60%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"30%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"40%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                        </List>
                      </Box>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12} sm={12} md={4} lg={4}>
                  <Box className="Section-Two">
                    <Box className="center">
                      <Box>
                        <Skeleton
                          animation="wave"
                          variant="rounded"
                          width={"145px"}
                          height={"50px"}
                        />
                      </Box>
                    </Box>
                    <Box className="content">
                      <Typography className="subheading">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"55%"}
                        />
                      </Typography>
                      <Typography className="subtext">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"85%"}
                        />
                      </Typography>
                      <Box className="document-section">
                        <List>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"100%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"60%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"80%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"100%"}
                                  />
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"10%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"90%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                        </List>
                      </Box>
                    </Box>
                  </Box>
                </Grid>
                <Grid item xs={12} sm={12} md={4} lg={4}>
                  <Box className="Section-Three">
                    <Box className="center">
                      <Box>
                        <Skeleton
                          animation="wave"
                          variant="rounded"
                          width={"145px"}
                          height={"50px"}
                        />
                      </Box>
                    </Box>
                    <Box className="content">
                      <Typography className="subheading">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"50%"}
                        />
                      </Typography>
                      <Typography className="subheading withoutText">
                        <Skeleton
                          animation="wave"
                          variant="text"
                          width={"30%"}
                        />
                      </Typography>
                      <Box>
                        <List>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"85%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"90%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"75%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                          <ListItem disablePadding>
                            <ListItemIcon>
                              <CheckIcon />
                            </ListItemIcon>
                            <ListItemText
                              primary={
                                <>
                                  <Skeleton
                                    animation="wave"
                                    variant="text"
                                    width={"78%"}
                                  />
                                </>
                              }
                            />
                          </ListItem>
                        </List>
                      </Box>
                    </Box>
                  </Box>
                </Grid>
              </Grid>
            </VerifySection>
          </VerifiedInnerBox>
          <FromSection>
            <VerifiedHeading>
              <>
                <Skeleton
                  animation="wave"
                  variant="text"
                  width={"30%"}
                  height={"54px"}
                />
              </>
            </VerifiedHeading>
            <VerifiedInnerBox>
              <Box py={6} className="accordion">
                <Box
                  sx={{
                    border: "1px solid rgb(184, 175, 175)",
                    borderRadius: "10px",
                    padding: "12px 16px",
                    background: "rgb(249, 249, 249)",
                  }}
                >
                  <Skeleton animation="wave" variant="text" width={"15%"} />
                </Box>
                <Box
                  sx={{
                    border: "1px solid rgb(184, 175, 175)",
                    borderRadius: "10px",
                    padding: "12px 16px",
                    background: "rgb(249, 249, 249)",
                  }}
                >
                  <Skeleton animation="wave" variant="text" width={"10%"} />
                </Box>
                <Box
                  sx={{
                    border: "1px solid rgb(184, 175, 175)",
                    borderRadius: "10px",
                    padding: "12px 16px",
                    background: "rgb(249, 249, 249)",
                  }}
                >
                  <Skeleton animation="wave" variant="text" width={"8%"} />
                </Box>
                <Box
                  sx={{
                    border: "1px solid rgb(184, 175, 175)",
                    borderRadius: "10px",
                    padding: "12px 16px",
                    background: "rgb(249, 249, 249)",
                  }}
                >
                  <Skeleton animation="wave" variant="text" width={"12%"} />
                </Box>
              </Box>
              <Box
                sx={{ display: "flex", flexDirection: "column", gap: "4px" }}
              >
                <Box
                  sx={{ display: "flex", alignItems: "center", gap: "10px" }}
                >
                  <Box
                    sx={{
                      width: "22px",
                      maxWidth: "22px",
                      minWidth: "22px",
                      height: "22px",
                    }}
                  >
                    <Skeleton animation="wave" variant="rounded" />
                  </Box>
                  <Skeleton animation="wave" variant="text" width={"35%"} />
                </Box>
                <Box
                  sx={{ display: "flex", alignItems: "center", gap: "10px" }}
                >
                  <Box
                    sx={{
                      width: "22px",
                      maxWidth: "22px",
                      minWidth: "22px",
                      height: "22px",
                    }}
                  >
                    <Skeleton animation="wave" variant="rounded" />
                  </Box>
                  <Skeleton animation="wave" variant="text" width={"30%"} />
                </Box>
              </Box>
              <BTNbox py={3} sx={{}}>
                <Skeleton
                  animation="wave"
                  variant="rounded"
                  width={"70px"}
                  height={"38.5px"}
                />
                <Skeleton
                  animation="wave"
                  variant="rounded"
                  width={"70px"}
                  height={"38.5px"}
                />
              </BTNbox>
            </VerifiedInnerBox>
          </FromSection>
        </BusinessVerifiedouterBox>
      </Box>
    </>
  );
}