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


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

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

    return (
        <Typography
            sx={{
                fontWeight: 400,
                fontSize: "12px",
                lineHeight: "14px",
                color: theme.palette.grey2.main,
            }}
        >
            {text1}
            {text2 &&
                <Typography
                    component="span"
                    sx={{
                        fontWeight: 400,
                        fontSize: "12px",
                        lineHeight: "14px",
                        color: theme.palette.fadePurple.main,
                        textUnderlinePosition: "under",
                        textDecorationColor: theme.palette.brightPurple.main,
                    }}
                >
                    {text2}
                </Typography>
            }
        </Typography>
    );
}