Proyectos de Subversion LeadersLinked - SPA

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

import Modal from '@components/UI/modal/Modal';
import colors from '@styles/config/colors';

const StyledMemberContainer = styled('div')(() => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: '0.5rem',
  padding: '10px 0',
  borderTop: `1px solid ${colors.border.primary}`,
  borderBottom: `1px solid ${colors.border.primary}`
}));

const StyledMemberInfo = styled('div')(() => ({
  display: 'flex',
  alignItems: 'center',
  gap: '0.5rem'
}));

const StyledMemberImage = styled(Avatar)(() => ({
  width: 40,
  height: 40
}));

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;