in the following code, in the Typography tag, change the content to title only if title and value is defined, otherwise put hyphen: import { Box, Skeleton, Typography, styled } from "@mui/material";
import * as RBConsts from "src/assets/i18n";
import getLangCode from "src/utilities/getLangCode";
import {
  MobileIcon,
  RssFeedIcon,
  EmailIcon,
  FingerprintIcon,
  ProfileIcon,
  PersonIcon,
  HassadPointsIcon,
  UserNumberIcon,
  RmCodeIcon,
  CisIcon,
} from "src/assets/icons";
import HassadPoints from "./HassadPoints";
import { greyedOutStyle } from "src/styles/globalStyles";
import useCustomerInfoMain from "src/hooks/useCustomerInfoMain";
import EditButton from "src/components/EditButton";
import { useApi } from "src/contexts/ApiContext";
const langCode = getLangCode();
const i18n = RBConsts.LangConst[langCode];

const ColumnContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  gap: theme.spacing(4),
  backgroundColor: theme.palette.white.main,
  padding: theme.spacing(4),
  minHeight: theme.spacing(60),
}));

const RowContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: theme.spacing(4),
  justifyContent: "space-between",
}));

const InfoContainer = styled(Box)({
  display: "flex",
  flexDirection: "column",
  gap: 1,
  width: "50%",
});

const CustomerName = styled(Typography)({
  color: "#39217F",
  fontFamily: "Effra Medium",
  fontSize: "1.15rem",
  fontStyle: "normal",
  fontWeight: 400,
  lineHeight: "normal",
});

const CustomerTitle = styled(Typography)({
  color: "#39217F",
  fontFamily: "Effra Medium",
  fontSize: "1.15rem",
  fontStyle: "normal",
  fontWeight: 400,
  lineHeight: "normal",
});

const DetailsContainer = styled(Box)(({ theme }) => ({
  display: "grid",
  gridTemplateColumns: "repeat(3, 1fr)",
  gap: theme.spacing(4),
  [theme.breakpoints.down("lg")]: {
    gridTemplateColumns: "repeat(2, 1fr)",
  },
}));

const DetailsItemContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  gap: theme.spacing(6),
  alignItems: "center",
  width: "100%",
}));

const CustomerProfile = () => {
  const { getEditProfileUrl } = useApi();
  const { isPending, isError, data } = useCustomerInfoMain();

  const info = data?.CustomerInfoMain || {};

  const handleEditClick = (url) => {
    window.location.assign(url);
  };

  const profileDetails = [
    {
      icon: <MobileIcon />,
      title: info?.PhoneNumber,
      value: info?.PhoneNumber,
    },
    {
      icon: <CisIcon />,
      title: `${i18n.CIS}: ${info?.CISNumber}`,
      value: info?.CISNumber,
    },
    {
      icon: <RssFeedIcon />,
      title: `${i18n.DIGITALLY_ENROLLED} ${info?.DigitallyEnrolledFlag}`,
      value: info?.DigitallyEnrolledFlag,
    },
    {
      icon: <EmailIcon />,
      title: info?.Email,
      value: info?.Email,
    },
    {
      icon: <FingerprintIcon />,
      title: `${i18n.DV_FLAG} ${info?.DigitalVoucherFlag}`,
      value: info?.DigitalVoucherFlag,
    },
    {
      icon: <UserNumberIcon />,
      title: `${i18n.USER_NUMBER}: ${info?.UserNumber}`,
      value: info?.UserNumber,
    },
    {
      icon: <PersonIcon />,
      title: info?.Age + ` ${i18n.YEARS_OLD}`,
      value: info?.Age,
    },
    {
      icon: <RmCodeIcon />,
      title: `${i18n.RM_CODE}: ${info?.RMCode}`,
      value: info?.RMCode,
    },
    {
      icon: <HassadPointsIcon />,
      title: <HassadPoints />,
      value: <HassadPoints />,
    },
  ];

  return (
    <ColumnContainer>
      <RowContainer>
        <Box sx={{ display: "flex", gap: "1rem", flex: 1 }}>
          <ProfileIcon />
          <InfoContainer>
            <CustomerName>
              {isPending || isError ? (
                <Skeleton animation={isError ? false : "pulse"} />
              ) : (
                info?.FullName
              )}
            </CustomerName>
            <CustomerTitle>
              {isPending || isError ? (
                <Skeleton animation={isError ? false : "pulse"} />
              ) : (
                `${info?.["CustomerSegment "] || "-"} | SAMA Class: ${
                  info?.SAMAClass
                }`
              )}
            </CustomerTitle>
          </InfoContainer>
        </Box>
        <EditButton
          onClick={() =>
            handleEditClick(getEditProfileUrl(info?.Contact_RowId || ""))
          }
        />
      </RowContainer>

      <DetailsContainer>
        {profileDetails.map(({ icon, title, value }, index) => {
          const isEmpty = value === "" || value === null ? true : false;
          return (
            <DetailsItemContainer
              key={index}
              sx={isEmpty ? { ...greyedOutStyle } : {}}
            >
              {icon}
              {isPending || isError ? (
                <Skeleton width={"75%"} animation={isError ? false : "pulse"} />
              ) : (
                <Typography
                  sx={{
                    color: isEmpty ? "grey" : "#39217F",
                    width: "75%",
                    fontFamily: "Inter",
                    fontSize: "1rem",
                    fontStyle: "normal",
                    fontWeight: 400,
                    lineHeight: "normal",
                  }}
                >
                  {title}
                </Typography>
              )}
            </DetailsItemContainer>
          );
        })}
      </DetailsContainer>
    </ColumnContainer>
  );
};

export default CustomerProfile;