Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Avatar, Button, styled, Typography } from '@mui/material'
import { useSelector } from 'react-redux'
import parse from 'html-react-parser'

import colors from '@styles/colors'

import Widget from '@components/UI/Widget'

const WidgetButton = styled(Button)(() => ({
  alignItems: 'center',
  borderRadius: 0,
  color: colors.font.subtitle,
  display: 'flex',
  fontWeight: 600,
  justifyContent: 'space-between',
  width: '100%',
  '& span': {
    color: '#0a66c2'
  }
}))

const UserProfileAvatar = styled(Avatar)(() => ({
  width: '60px',
  height: '60px',
  margin: 'auto'
}))

const UserProfileCard = ({
  user: {
    cover = '',
    image = '',
    fullname = '',
    description = '',
    visits = 0,
    connections = 0
  }
}) => {
  const labels = useSelector(({ intl }) => intl.labels)
  const navigate = useNavigate()

  const handleNavigate = (path) => navigate(path)

  return (
    <Widget>
      <Widget.Media
        src={cover}
        alt={`${fullname} profile cover`}
        height={60}
        styles={{
          display: cover ? 'block' : 'none',
          marginBottom: cover ? '-20px' : '0px'
        }}
      />

      <Widget.Body styles={{ textAlign: 'center' }}>
        <UserProfileAvatar src={image} alt={`${fullname} profile image`} />
        <Typography variant='h2'>{parse(fullname ?? '')}</Typography>
        <Typography>{parse(description ?? '')}</Typography>
      </Widget.Body>

      <WidgetButton
        onClick={() => handleNavigate('/profile/people-viewed-profile')}
      >
        {labels.who_has_seen_my_profile}
        <Typography variant='overline'>{visits ?? 0}</Typography>
      </WidgetButton>

      <WidgetButton
        onClick={() => handleNavigate('/connection/my-connections')}
      >
        {labels.connections}
        <Typography variant='overline'>{connections ?? 0}</Typography>
      </WidgetButton>
    </Widget>
  )
}

export default UserProfileCard