import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { getSignatureAccentColour } from "../services/whiteLabel";
import { Team, User } from "models";

const useStyles = makeStyles(() => ({
    profileName: {
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        textTransform: "capitalize",
        color: getSignatureAccentColour(),
        marginBottom: -3,
        marginTop: -3
    },
}));

interface Props {
    user: User;
    team?: Team;
}

export default function UserMenu(props: Props) {
    const { user, team } = props;
    const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
    const classes = useStyles();

    return (
        <>
        <Typography className={classes.profileName} variant="button">
            {user.name()}
        </Typography>
        {team && team.settings.name && hasTeams && (
            <Typography className={classes.profileName} variant="button">
                ({team.settings.name})
            </Typography>
        )}
        </>
    )

}