Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Link } from 'react-router-dom'
import { Avatar } from '@mui/material'
import { useSelector } from 'react-redux'

import Paraphrase from '../../UI/Paraphrase'
import StyledContainer from '../../widgets/WidgetLayout'

const UserInfo = ({
  cover = '',
  image = '',
  fullname = '',
  description = '',
  visits = 0,
  connections = 0
}) => {
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <StyledContainer>
      {cover && (
        <img
          src='./static/profile_2.jpg'
          alt='Profile cover'
          className='sidebar__cover'
        />
      )}
      <Avatar
        src={image}
        alt={`${fullname} profile image`}
        sx={{ width: '60px', height: '60px' }}
      />
      <Paraphrase as='h2'>{fullname}</Paraphrase>
      <Paraphrase>{description}</Paraphrase>
      <StatItem
        title={labels.who_has_seen_my_profile}
        number={visits}
        url='/profile/people-viewed-profile'
      />
      <StatItem
        title={labels.connections}
        number={connections}
        url='/connection/my-connections'
      />
    </StyledContainer>
  )
}

const StatItem = ({ title = '', number = 0, url = '' }) => {
  return (
    <Link
      to={url}
      className='sidebar__stat'
      target='secondary'
      onClick={(e) => !url && e.preventDefault()}
    >
      <span>{title}</span>
      <span className='sidebar__stat-number'>{number}</span>
    </Link>
  )
}

export default UserInfo