var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useState } from 'react';
import { makeStyles } from '../../shared/makeStyles';
import { Flex } from '../Flex';
export const fallbackAvatarUrl = 'https://www.dndbeyond.com/content/skins/waterdeep/images/characters/default-avatar-builder.png';
export const ddbAvatarUrl = 'https://www.dndbeyond.com/content/skins/waterdeep/images/dnd-beyond-b-red.png';
const useStyles = makeStyles()(({ gameLog: { gameLogEntryAvatarMargin, gameLogEntryAvatarSize } }) => ({
    Avatar: {
        width: gameLogEntryAvatarSize,
        height: gameLogEntryAvatarSize,
        margin: `0 ${gameLogEntryAvatarMargin} ${gameLogEntryAvatarMargin} 0`,
    },
    AvatarPortrait: {
        width: gameLogEntryAvatarSize,
        height: gameLogEntryAvatarSize,
        borderRadius: '50%',
        objectFit: 'cover',
        overflow: 'hidden',
    },
}));
/**
 * "... but HTML paragraphs can be any structural grouping of related content,
 * such as images or form fields."
 *
 * @see https://stackoverflow.com/questions/57860703/whats-the-most-appropriate-markup-for-an-html-user-avatar
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
 */
export const Avatar = (_a) => {
    var { className, avatarUrl, name } = _a, props = __rest(_a, ["className", "avatarUrl", "name"]);
    const [avatarDidError, setAvatarDidError] = useState(false);
    const { classes, cx } = useStyles();
    return (React.createElement(Flex, Object.assign({ tagName: "p" }, props, { className: cx(className, classes.Avatar), role: "img" }),
        React.createElement("img", { className: classes.AvatarPortrait, src: avatarDidError ? fallbackAvatarUrl : avatarUrl, alt: name, onError: () => setAvatarDidError(true) })));
};
//# sourceMappingURL=Avatar.js.map