import { jsx as _jsx } from "react/jsx-runtime";
import Tippy from '@tippyjs/react';
import { cs } from '../utils';
import { TutorialCard } from './tutorialCard';
import { useTutorial } from './useTutorial';
/** Popover Tutorial is used to display information about a new, or existing feature. */
export function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement = 'right', showSkipButton, }) {
    const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id);
    const onClose = (e) => {
        setIsVisible(false);
        if (e === 'dismissed')
            onDismiss?.();
        if (e === 'finished')
            onFinish?.();
        saveDisplayed(e);
    };
    return (_jsx(Tippy, { content: _jsx(TutorialCard, { actionLabel: actionLabel, className: cs('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
            modifiers: [
                {
                    name: 'flip',
                    enabled: false,
                },
            ],
        }, visible: isVisible, children: children }));
}
Tutorial.displayName = 'Tutorial';
//# sourceMappingURL=tutorial.js.map