import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

export type UserInfoDisplayProps = {
  Icon: React.ElementType;
  dataMessage: any;
};

export const UserInfoDisplay: FC<UserInfoDisplayProps> = props => {
  const { Icon, dataMessage } = props;

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        mb: 1,
      }}
    >
      <Icon
        fontSize="small"
        sx={{ mr: 0.6 }}
      />
      <Typography sx={{ fontSize: isMobile ? '14px' : '16px' }}>
        {dataMessage}
      </Typography>
    </Box>
  );
};

export default UserInfoDisplay;