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

interface Props {
  text1: string;
  text2: string;
}

export default function ComplexNavText({ text1, text2 }: Props) {
  const theme = useTheme();
  const navigate = useNavigate();

  return (
    <Typography component="div" sx={{ display: "flex" }}>
      <Typography
        component="div"
        onClick={() => navigate("/tariffs")}
        sx={{
          cursor: "pointer",
          fontWeight: 400,
          fontSize: "12px",
          lineHeight: "14px",
          color: theme.palette.grey2.main,
        }}
      >
        {text1}
      </Typography>
      <Typography
        component="span"
        sx={{
          cursor: "default",
          fontWeight: 400,
          fontSize: "12px",
          lineHeight: "14px",
          color: theme.palette.fadePurple.main,
          textUnderlinePosition: "under",
          textDecorationColor: theme.palette.brightPurple.main,
        }}
      >
        {text2}
      </Typography>
    </Typography>
  );
}