import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";

import { images } from "constants/images";
import { Image } from "uiCore/image";

const StyledGridOverlay = styled("div")(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  height: "330px",
  "& .ant-empty-img-1": {
    fill: theme.palette.mode === "light" ? "#aeb8c2" : "#262626",
  },
  "& .ant-empty-img-2": {
    fill: theme.palette.mode === "light" ? "#f5f5f7" : "#595959",
  },
  "& .ant-empty-img-3": {
    fill: theme.palette.mode === "light" ? "#dce0e6" : "#434343",
  },
  "& .ant-empty-img-4": {
    fill: theme.palette.mode === "light" ? "#fff" : "#1c1c1c",
  },
  "& .ant-empty-img-5": {
    fillOpacity: theme.palette.mode === "light" ? "0.8" : "0.08",
    fill: theme.palette.mode === "light" ? "#f5f5f5" : "#fff",
  },
  ".noDataText": {
    marginTop: "0.3rem",
    paddingLeft: "0.1rem",
    color: theme.palette.grey[400],
  },
}));

export const NoData = () => {
  return (
    <StyledGridOverlay>
      <Image src={images.noData} />
      <Box className="noDataText">No Record Found</Box>
    </StyledGridOverlay>
  );
};