Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Avatar, styled, Typography } from '@mui/material';
import VisibilityOutlined from '@mui/icons-material/VisibilityOutlined';
import MapOutlined from '@mui/icons-material/MapOutlined';
import ShareOutlined from '@mui/icons-material/ShareOutlined';

import Widget from '@components/UI/Widget';

const Row = styled('div')(() => ({
  display: 'flex',
  justifyContent: 'space-around',
  alignItems: 'center'
}));

export default function ProfileInfo({ image, fullName, visits, country, connections }) {
  return (
    <Widget>
      <Widget.Body>
        <Avatar
          src={image}
          alt={`${fullName} profile-image`}
          sx={{ margin: '0 auto', width: 100, height: 100 }}
        />
        <Typography variant='h2' sx={{ textAlign: 'center' }}>
          {fullName}
        </Typography>

        <Row>
          <Typography variant='overline'>
            <VisibilityOutlined />
            {visits}
          </Typography>

          <Typography variant='overline'>
            <MapOutlined />
            {country}
          </Typography>

          <Typography variant='overline'>
            <ShareOutlined />
            {connections}
          </Typography>
        </Row>
      </Widget.Body>
    </Widget>
  );
}