Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Badge, IconButton, Avatar as MuiAvatar } from '@mui/material'
import { Edit } from '@mui/icons-material'

import ImageModal from '@components/modals/ImageModal'

export default function Avatar({
  src = '',
  alt = '',
  styles = {},
  url = '',
  edit = false,
  size,
  badgeStyles,
  ...props
}) {
  const [showModal, setShowModal] = useState(false)
  const [image, setImage] = useState(src)

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

  return (
    <>
      <Badge
        overlap='circular'
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        badgeContent={
          edit && (
            <IconButton onClick={toggleModal}>
              <Edit />
            </IconButton>
          )
        }
        sx={badgeStyles}
      >
        <MuiAvatar src={image} alt={alt} sx={styles} {...props} icon />
      </Badge>
      <ImageModal
        show={showModal}
        url={url}
        message={`Imágenes recomendadas de ${size ?? '200px'} `}
        onClose={toggleModal}
        onComplete={(newImage) => setImage(newImage)}
      />
    </>
  )
}