import { Box, Stack, styled } from "@mui/material";
import { Breadcrumb, SimpleCard } from "app/components";
import ConsecutiveSnackbar from "./ConsecutiveSnackbar";
import CustomizedSnackbars from "./CustomizedSnackbar";
import DirectionSnackbar from "./DirectionSnackbar";
import LongTextSnackbar from "./LongLengthSnackbar";
import PositionedSnackbar from "./PositionedSnackbar";
import SimpleSnackbar from "./SimpleSnackbar";
import IntegrationNotistack from "./StackedSnackbar";
import TransitionsSnackbar from "./TransitionSnackbar";

const Container = styled("div")(({ theme }) => ({
  margin: "30px",
  [theme.breakpoints.down("sm")]: { margin: "16px" },
  "& .breadcrumb": {
    marginBottom: "30px",
    [theme.breakpoints.down("sm")]: { marginBottom: "16px" },
  },
}));

const AppSnackbar = () => {
  return (
    <Container>
      <Box className="breadcrumb">
        <Breadcrumb
          routeSegments={[{ name: "Material", path: "/material" }, { name: "Snackbar" }]}
        />
      </Box>

      <Stack spacing={3}>
        <SimpleCard title="simple snackbar">
          <SimpleSnackbar />
        </SimpleCard>

        <SimpleCard title="customized snackbar">
          <CustomizedSnackbars />
        </SimpleCard>

        <SimpleCard title="positioned snackbar">
          <PositionedSnackbar />
        </SimpleCard>

        <SimpleCard title="message length">
          <LongTextSnackbar />
        </SimpleCard>

        <SimpleCard title="transition">
          <TransitionsSnackbar />
        </SimpleCard>

        <SimpleCard title="consecutive snackbar">
          <ConsecutiveSnackbar />
        </SimpleCard>

        <SimpleCard title="Control Slide direction">
          <DirectionSnackbar />
        </SimpleCard>

        <SimpleCard title="complementary project">
          <IntegrationNotistack />
        </SimpleCard>
      </Stack>
    </Container>
  );
};

export default AppSnackbar;