import { jsx as _jsx } from "react/jsx-runtime";
import Icon from '../Icon';
import cx from 'classnames';
import { useEffect, useState } from 'react';
import './styles.scss';
export const AvatarSizes = [
    'x-large',
    'large',
    'medium',
    'small',
    'x-small',
];
export default function Avatar({ src, className, size = 'large', title, onClick, }) {
    const [usePlaceholder, setUsePlaceholder] = useState(false);
    const getClassNames = cx('ds-avatar', className, size, {
        placeholder: usePlaceholder,
    });
    useEffect(() => {
        setUsePlaceholder(!src);
    }, [src]);
    return (_jsx("div", { className: getClassNames, children: usePlaceholder ? (_jsx(Icon, { name: "account_circle", size: size, filled: true, onClick: onClick })) : (_jsx("img", { src: src, onError: () => {
                setUsePlaceholder(true);
            }, referrerPolicy: "no-referrer", title: title, onClick: onClick })) }));
}
