import { type FC } from 'react';

import Box from '@material-hu/mui/Box';
import Typography, { TypographyProps } from '@material-hu/mui/Typography';

export type GroupChatNameProps = Pick<
  TypographyProps,
  'variant' | 'width' | 'minWidth'
> & {
  title: string;
  className?: string;
  subtitle?: string;
};

const GroupChatName: FC<GroupChatNameProps> = props => {
  const { title, className, variant, subtitle, width, minWidth } = props;

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
      }}
    >
      <Typography
        variant={variant}
        className={className}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {title}
      </Typography>
      {subtitle && (
        <Typography
          variant="body2"
          color="textSecondary"
          className={className}
          style={{
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            textAlign: 'start',
          }}
          width={width}
          minWidth={minWidth}
          maxWidth={720}
        >
          {subtitle}
        </Typography>
      )}
    </Box>
  );
};

export default GroupChatName;