import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AISpinner from '../../../AI/AISpinner';
import { SvgIcon } from '@mui/material';
import { aiTwinkleKeyframes } from '../constants';
import { AI_ACCENT_CLASS, AI_PENCIL, AI_PHOTO } from './constants';
/** Twinkle the sparkle accents only while the parent button is hovered. */
const ACCENT_HOVER = `.MuiButtonBase-root:hover:not(.Mui-disabled) & .${AI_ACCENT_CLASS},` +
    `.MuiFab-root:hover:not(.Mui-disabled) & .${AI_ACCENT_CLASS}`;
export const AIIcon = ({ name = 'sparkles', size, color = 'currentColor', sx, }) => {
    if (name === 'sparkles') {
        return (_jsx(AISpinner, { size: size, color: color, sx: sx }));
    }
    const glyph = name === 'ai-pencil' ? AI_PENCIL : AI_PHOTO;
    return (_jsxs(SvgIcon, { viewBox: "0 0 24 24", sx: {
            color,
            ...(size ? { fontSize: size, width: size, height: size } : {}),
            [`& .${AI_ACCENT_CLASS}`]: {
                transformOrigin: 'center',
                transformBox: 'fill-box',
            },
            [ACCENT_HOVER]: {
                animation: `${aiTwinkleKeyframes} 1.4s ease-in-out infinite`,
                '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
            },
            ...sx,
        }, children: [glyph.paths.map(d => (_jsx("path", { d: d, fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd", stroke: "none" }, d))), glyph.sparkles.map(d => (_jsx("path", { className: AI_ACCENT_CLASS, d: d, fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd", stroke: "none" }, d)))] }));
};
