import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { useEffect, useState } from 'react';
import ImageUtils from '../../functions/ImageUtils';
import './style.scss';
export default function AppPicture({ src, title, className, person, onClick, }) {
    const [empty, setEmpty] = useState(false);
    useEffect(() => {
        setEmpty(!src);
    }, []);
    return (_jsx("div", { className: `app-picture-container ${empty ? 'empty' : ''}`, children: _jsx("img", { className: cx(className, { 'picture-placeholder': !src }), src: ImageUtils.display(src, person), title: title, onClick: () => onClick && onClick(), onError: ({ currentTarget }) => {
                setEmpty(true);
                /* eslint-disable no-param-reassign */
                currentTarget.onerror = null; // prevents looping
                currentTarget.src = ImageUtils.getPlaceHolder(person);
                /* eslint-enable no-param-reassign */
            } }) }));
}
