Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Avatar } from '@mui/material'
import { useSelector } from 'react-redux'
import styled, { css } from 'styled-components'

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

const StyledInfoContainer = styled(WidgetWrapper)`
  display: flex;
  flex-direction: column;
  align-items: center;
  p,
  h2 {
    padding: 0 1rem;
    text-align: center;
  }
  p {
    margin-bottom: 0;
  }
  > p {
    margin-bottom: 10px;
  }
  ${(props) =>
    !props.cover &&
    css`
      padding-top: 10px;
    `}
`

const StyledInfoItem = styled.div`
  padding: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .number {
    font-weight: bold !important;
    color: #0a66c2 !important;
  }
  ${(props) =>
    props.url &&
    css`
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 0, 0, 0.08);
      }
    `}
`

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

  return (
    <StyledInfoContainer cover={cover}>
      {cover && <img src={cover} alt='Profile 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'
      />
    </StyledInfoContainer>
  )
}

const StatItem = ({ title = '', number = 0, url = '' }) => {
  const handleClick = () => {
    if (!url) return
    window.open(url, '_blank')
  }
  return (
    <StyledInfoItem url={url} onClick={handleClick}>
      <span>{title}</span>
      <span className='number'>{number}</span>
    </StyledInfoItem>
  )
}

export default UserInfo