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

import { useNavigate, useNavigationType } from "react-router";

export function LeftSidebar() {
  const navigate = useNavigate();
  const navigationType = useNavigationType(); // PUSH, POP, REPLACE

  const handleBack = () => {
    if (navigationType === "PUSH") {
      navigate(-1);
    } else {
      navigate("/route");
    }
  };

  return (
    <Stack direction="column" width="300px" p={2} bgcolor="primary.main">
      <button
        onClick={handleBack}
        type="button"
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 10,
          color: "#fff",
          backgroundColor: "#222",
          borderRadius: 10,
          width: "100%",
          border: "none",
          cursor: "pointer",
        }}
      >
        <p>Назад</p>
      </button>

      <Stack
        direction="column"
        alignItems="center"
        justifyContent="center"
        my={10}
      >
        <img src={"/Emblem.svg"} alt="logo" width={100} height={100} />
        <Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
          При поддержке Правительства Санкт-Петербурга
        </Typography>
      </Stack>

      <Stack
        direction="column"
        alignItems="center"
        justifyContent="center"
        my={10}
        spacing={2}
      >
        <Button variant="outlined" color="warning" fullWidth>
          Достопримечательности
        </Button>
        <Button variant="outlined" color="warning" fullWidth>
          Остановки
        </Button>
      </Stack>

      <Stack
        direction="column"
        alignItems="center"
        justifyContent="center"
        my={10}
      >
        <img
          src={"/GET.png"}
          alt="logo"
          width="80%"
          style={{ margin: "0 auto" }}
        />
      </Stack>

      <Typography
        variant="h6"
        textAlign="center"
        mt="auto"
        sx={{ color: "#fff" }}
      >
        #ВсемПоПути
      </Typography>
    </Stack>
  );
}