import * as React from 'react';
import { Box, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Tooltip } from '@nymproject/react/tooltip/Tooltip';

export const CustomColumnHeading: FCWithChildren<{ headingTitle: string; tooltipInfo?: string }> = ({
  headingTitle,
  tooltipInfo,
}) => {
  const theme = useTheme();

  return (
    <Box alignItems="center" display="flex">
      {tooltipInfo && (
        <Tooltip
          title={tooltipInfo}
          id={headingTitle}
          placement="top-start"
          textColor={theme.palette.nym.networkExplorer.tooltip.color}
          bgColor={theme.palette.nym.networkExplorer.tooltip.background}
          maxWidth={230}
          arrow
        />
      )}
      <Typography variant="body2" fontWeight={600} data-testid={headingTitle}>
        {headingTitle}
      </Typography>
    </Box>
  );
};