import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "../cmp/tooltip";
import { useEmojiRegistry } from "./emoji-context";
export default function Emoji({ className = "size-6", registry: registryOverride, shortcode, tooltip = true, }) {
    const registry = useEmojiRegistry(registryOverride);
    const emoji = registry.resolve(shortcode);
    const [failedSource, setFailedSource] = useState();
    useEffect(() => setFailedSource(undefined), [emoji?.src]);
    const content = emoji?.src && failedSource !== emoji.src ? (_jsx("img", { alt: emoji.shortcode, className: className, decoding: "async", draggable: false, loading: "lazy", src: emoji.src, onError: () => setFailedSource(emoji.src) })) : (_jsx("span", { children: shortcode }));
    if (!tooltip)
        return content;
    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: content }), _jsx(TooltipContent, { sideOffset: 8, children: emoji?.shortcode ?? shortcode })] }));
}
