import { useState } from "react";

interface EmojiProps {
    unified: string;
    size?: number;
}

export function Emoji(props: EmojiProps) {
    const [error, setError] = useState(false);
    const [loaded, setLoaded] = useState(false);

    const handleError = () => setError(true);
    const handleLoad = () => setLoaded(true);

    return (
        <>
        <span style={{ userSelect: 'auto' }}>
            {!error && (
                <>
                    <img
                        style={{
                            width: props.size ? `${props.size}px` : '1.4em',
                            height: props.size ? `${props.size}px` : '1.4em',
                            verticalAlign: 'sub',
                            marginLeft: '2px',
                            marginRight: '2px',
                           // display: loaded ? 'inline' : 'none'
                        }}
                        onError={handleError}
                        onLoad={handleLoad}
                        src={`https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/${props.unified}.png`}
                        alt={props.unified}
                    />
                </>
            )}
            {error && props.unified}
        </span>
        </>
    )
}