import { Box, BoxProps, Typography } from '@mui/material';
import { Verified as VerifiedIcon } from '@mui/icons-material';

type TUserInfoItemProps = {
  data: {
    icon: any;
    title: string;
    content: any;
  };
  verified?: boolean;
};

export default function UserInfoItem({ data, verified = false, ...rest }: TUserInfoItemProps & BoxProps) {
  return (
    <Box
      {...rest}
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        ...rest.sx,
      }}>
      <Typography
        sx={{
          display: 'flex',
          alignItems: 'center',
          color: 'text.primary',
          fontSize: '14px',
          gap: 1,
          fontWeight: 500,
        }}>
        {data.icon}
        {data.title}
      </Typography>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Typography
          component="div"
          sx={{
            color: 'text.secondary',
            whiteSpace: 'pre-wrap',
            fontSize: '14px',
          }}>
          {data.content}
        </Typography>
        {verified && <VerifiedIcon color="success" style={{ fontSize: 16, marginLeft: 4 }} />}
      </Box>
    </Box>
  );
}
