Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Avatar, Typography } from '@mui/material'

import { parse } from '@utils'

import StatItem from './StatItem'
import Widget from '@components/UI/Widget'

export default function GroupWidget({
  group: {
    cover = '',
    image = '',
    name = '',
    overview = '',
    total_members = '',
    group_type = '',
    accessibility = ''
  }
}) {
  return (
    <Widget>
      <Widget.Media
        src={cover}
        alt='Profile cover'
        styles={{
          marginBottom: 'calc(-30px - 1rem)',
          height: '60px',
          objectFit: 'cover'
        }}
      />

      <Widget.Body styles={{ textAlign: 'center' }}>
        <Avatar
          src={image}
          name={name}
          sx={{ width: 60, height: 60, margin: 'auto' }}
        />
        <Typography variant='h2'>{name}</Typography>
        <Typography>{`${group_type} - ${accessibility}`}</Typography>
        <Typography>{parse(overview)}</Typography>
      </Widget.Body>

      <StatItem title='Número de miembros' number={total_members} />
    </Widget>
  )
}