import React, { useState } from 'react';
import { useFloating, useClick, useDismiss, useInteractions, offset, flip, shift } from '@floating-ui/react';

const HINT_ICONS = {
    film: 'fa-solid fa-film',
    character: 'fa-solid fa-masks-theater',
    award: 'fa-solid fa-trophy',
};

export default function ActorPopover({ hintType, hintText }) {
    const [isOpen, setIsOpen] = useState(false);

    const { refs, floatingStyles, context } = useFloating({
        open: isOpen,
        onOpenChange: setIsOpen,
        middleware: [offset(8), flip(), shift()],
        placement: 'left',
    });

    const click = useClick(context);
    const dismiss = useDismiss(context);
    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);

    const iconClass = HINT_ICONS[hintType] || 'fa-solid fa-circle-question';

    return (
        <>
            <button
                ref={refs.setReference}
                {...getReferenceProps()}
                className="popover-trigger"
                type="button"
            >
                <i className={iconClass}></i>
            </button>
            {isOpen && (
                <div
                    ref={refs.setFloating}
                    style={floatingStyles}
                    {...getFloatingProps()}
                    className="actor-popover"
                >
                    {hintText}
                </div>
            )}
        </>
    );
}