import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { upperCase } from 'es-toolkit';
import { useCallback } from 'react';
export const Directive = ({ className, type = 'info', title, children, open, onToggle, }) => {
    const rootClassName = clsx('rspress-directive', type, className);
    const titleNode = title || upperCase(type);
    const contentNode = (_jsx("div", { className: "rspress-directive-content", children: children }));
    const handleToggle = useCallback((ev) => {
        onToggle?.(ev.currentTarget.open);
    }, [onToggle]);
    if (type === 'details') {
        return (_jsxs("details", { className: rootClassName, open: open, onToggle: handleToggle, children: [_jsx("summary", { className: "rspress-directive-title", children: titleNode }), contentNode] }));
    }
    return (_jsxs("div", { className: rootClassName, children: [_jsx("div", { className: "rspress-directive-title", children: titleNode }), contentNode] }));
};
export default Directive;
