import { Box, Typography, useTheme } from "@mui/material";
import { Link, useLocation } from "react-router-dom";

export default function Menu() {
  const theme = useTheme();
  const location = useLocation();

  const color = location.pathname === "/" ? "white" : "black";

  const arrayMenu = [
    { name: "Тарифы", url: "/tariffs" },
    { name: "Тарифы на время", url: "/tariffs/time" },
    { name: "Тарифы на объём", url: "/tariffs/volume" },
    { name: "Вопросы и ответы", url: "/faq" },
    { name: "Кастомный тариф", url: "/tariffconstructor" },
    { name: "Корзина", url: "/basket" },
  ];

  return (
    <Box
      sx={{
        display: "flex",
        gap: "30px",
        overflow: "hidden",
      }}
    >
      {arrayMenu.map(({ name, url }, index) => (
        <Link key={name} style={{ textDecoration: "none" }} to={url}>
          <Typography
            color={location.pathname === url ? theme.palette.brightPurple.main : color}
            variant="body2"
            sx={{
              whiteSpace: "nowrap",
            }}
          >
            {name}
          </Typography>
        </Link>
      ))}
    </Box>
  );
}
