import React from "react";
import PropTypes from "prop-types";
import { useTheme } from "@mui/material/styles";
import { getStyles } from "../styles";
import Avatar from "@mui/material/Avatar";
import DefaultUserProfilePicture from "../../../../assets/images/DefaultUserProfilePicture.png";

const UserProfilePicture = ({ pictureUrl }) => {
  const theme = useTheme();
  const styles = getStyles(theme);
  const url = pictureUrl ?? DefaultUserProfilePicture;
  return <Avatar src={url} alt="..." sx={styles.profilePicture} />;
};

UserProfilePicture.propTypes = {
  pictureUrl: PropTypes.string
};

export default UserProfilePicture;
