Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react'
import { styled, Typography } from '@mui/material'

import ReactionsIcons from './reactions-icons'
import ReactionsModal from './reactions-modal'

const Row = styled('div')(() => ({
  display: 'flex',
  alignItems: 'center',
  gap: 0.5,
  cursor: 'pointer'
}))

export default function Reactions({ reactions = [], reactionsUrl = '' }) {
  const [showModal, setShowModal] = useState(false)

  const toggleModal = () => setShowModal((prevState) => !prevState)

  const totalReactions = useMemo(
    () => reactions.reduce((acc, r) => acc + parseInt(r.total), 0),
    [reactions]
  )

  return (
    <Row onClick={toggleModal}>
      <ReactionsIcons reactions={reactions} />
      {totalReactions ? (
        <Typography variant='overline'>{`${totalReactions} reacciones`}</Typography>
      ) : null}
      <ReactionsModal
        show={showModal}
        onClose={toggleModal}
        reactions={reactions}
        reactionsUsersUrl={reactionsUrl}
      />
    </Row>
  )
}