Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import { styled } from 'styled-components'
import { useLocation, useParams } from 'react-router-dom'
import parse from 'html-react-parser'

import Avatar from '../../UI/AvatarImage'
import StatItem from './StatItem'

const InfoWidget = styled.div`
  align-items: center;
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
  padding-top: ${(props) => (props.cover ? 0 : '10px')};
  overflow: hidden;

  p,
  h1 {
    font-size: 0.9rem;
    padding: 0 1rem;
  }

  h2,
  h1 {
    padding: 0 1rem;
    text-align: center;
  }

  @media (min-width: 576px) {
    border-radius: 10px;
  }
`

const InfoCover = styled.img`
  width: 100%;
  height: 60px;
  object-fit: cover;
  margin-bottom: -20px;
`

const GroupInfo = ({
  cover = '',
  image = '',
  name = '',
  overview = '',
  totalMembers = '',
  groupType = '',
  accessibility = '',
}) => {
  const { uuid } = useParams()
  const { pathname } = useLocation()
  const type = pathname.split('/')[1]

  return (
    <InfoWidget cover={cover}>
      {cover && (
        <InfoCover
          src={`/storage/type/${type}-cover/code/${uuid}${
            cover ? `/filename/${cover}` : '/'
          }`}
          alt="Profile cover"
        />
      )}
      <Avatar
        imageUrl={`/storage/type/${type}/code/${uuid}${
          image ? `/filename/${image}` : '/'
        }`}
        name={name}
        size="xl"
      />
      {name && <h2>{parse(name)}</h2>}
      <p>{`${groupType} - ${accessibility}`}</p>
      {overview && parse(overview)}
      <StatItem title="Número de miembros" number={totalMembers} />
    </InfoWidget>
  )
}

export default GroupInfo