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/config/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;