import { Box, SxProps } from '@mui/material';

import { MetadataValidationStatus } from 'types';
import { getMetadataDataMissingStatusTranslation } from 'utils';
import { Typography, Share } from 'components';

type DataMissingHeaderProps = {
  isDataMissing: MetadataValidationStatus | null;
  shareLink?: string;
  title?: string;
  titleStyle?: SxProps;
};

export const DataMissingHeader = ({
  title,
  isDataMissing,
  shareLink,
  titleStyle,
}: DataMissingHeaderProps) => (
  <Box
    sx={{
      display: 'grid',
      gridTemplateColumns: '1fr auto',
      gap: 2,
      alignItems: 'center',
      mb: 2,
    }}
    data-testid="governance-action-details-card-header"
  >
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <Typography
        sx={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          fontWeight: 600,
          ...(isDataMissing && { color: 'errorRed' }),
          ...titleStyle,
        }}
        variant="title2"
      >
        {(isDataMissing &&
          getMetadataDataMissingStatusTranslation(
            isDataMissing as MetadataValidationStatus
          )) ||
          title}
      </Typography>
    </Box>
    {shareLink && <Share link={shareLink} />}
  </Box>
);