Proyectos de Subversion LeadersLinked - SPA

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

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>
  )
}