import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
import { system } from '@workday/canvas-tokens-web';
import { sparkleSingleSmallIcon } from '@workday/canvas-system-icons-web';
import { createStencil } from '@workday/canvas-kit-styling';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
const storybookStatusIndicatorStencil = createStencil({
    base: {
        borderRadius: system.shape.round,
        padding: `${system.space.zero} ${system.space.x2}`,
        [systemIconStencil.vars.color]: 'currentColor',
    },
    modifiers: {
        type: {
            ai: {
                background: system.color.bg.ai.default,
                color: system.color.fg.ai,
            },
            deprecated: {
                background: system.color.static.amber.soft,
                color: system.color.static.amber.stronger,
            },
        },
    },
});
const content = {
    ai: {
        icon: sparkleSingleSmallIcon,
        label: 'AI Content',
    },
    deprecated: {
        icon: undefined,
        label: 'Deprecated',
    },
};
export const StorybookStatusIndicator = ({ type }) => {
    const { icon, label } = content[type];
    return (_jsxs(StatusIndicator, { className: "sb-unstyled cnvs-title-status-indicator", cs: storybookStatusIndicatorStencil({ type }), children: [icon && _jsx(StatusIndicator.Icon, { icon: icon }), _jsx(StatusIndicator.Label, { children: label })] }));
};
