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)}

      />

    </>

  )

}