import { Stack, StackProps, Typography } from '@mui/material';
import React from 'react';
import TooltipIcon from './tooltip-icon';

export default function IconText({
  icon = null,
  children = null,
  maxWidth = 100,
  title = undefined,
  sx = {},
}: {
  icon?: React.ReactNode;
  children?: React.ReactNode;
  maxWidth?: number;
  title?: React.ReactNode;
  sx?: StackProps['sx'];
}) {
  return (
    (children === 0 || children) && (
      <Stack
        direction="row"
        sx={[
          {
            alignItems: 'center',
            gap: 0.5,
          },
          { maxWidth, overflow: 'hidden' },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}>
        {icon}
        <TooltipIcon title={title || (typeof children === 'string' ? children : '')}>
          <Typography
            variant="body2"
            sx={{
              flex: 1,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              cursor: 'default',
            }}>
            {children}
          </Typography>
        </TooltipIcon>
      </Stack>
    )
  );
}
