Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Link } from 'react-router-dom'
import { Avatar, IconButton } from '@mui/material'
import { Clear, Delete, Done } from '@mui/icons-material'
import styled from 'styled-components'

import Modal from 'components/UI/modal/Modal'

const StyledMemberContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 10px 0;
  border-top: 1px solid ${(props) => props.theme.border.color.primary};
`

const StyledMemberInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
`

const StyledMemberImage = styled(Avatar)`
  width: 40px !important;
  height: 40px !important;
`

const MembersModal = ({
  isShow = false,
  members = [],
  handleClose = function () {},
  handleAction = function () {}
}) => {
  return (
    <Modal
      title='Miembros'
      show={isShow}
      onClose={handleClose}
      onReject={handleClose}
      showFooter={false}
    >
      {members.map((member) => (
        <Member key={member.id} member={member} handleAction={handleAction} />
      ))}
    </Modal>
  )
}

const Member = ({ member = {}, handleAction = function () {} }) => {
  const { name = '', image = '', profile = '', actions = {} } = member

  return (
    <StyledMemberContainer>
      <StyledMemberInfo>
        <Link to={profile}>
          <StyledMemberImage src={image} alt={`${name} profile image`} />
        </Link>

        <h4>{name}</h4>
      </StyledMemberInfo>

      {actions?.link_approve && (
        <IconButton
          onClick={() => handleAction(actions.link_approve)}
          title='Aprobar'
        >
          <Done />
        </IconButton>
      )}
      {actions?.link_reject && (
        <IconButton
          onClick={() => handleAction(actions.link_reject)}
          title='Rechazar'
        >
          <Clear />
        </IconButton>
      )}
      {actions?.link_cancel && (
        <IconButton
          onClick={() => handleAction(actions.link_cancel)}
          title='Cancelar'
        >
          <Delete />
        </IconButton>
      )}
    </StyledMemberContainer>
  )
}

export default MembersModal