import { jsxs, jsx } from 'react/jsx-runtime';
import { useTransform, motion } from 'motion/react';
import { eyelidVariants, clickTransition, bodyTransition, smallBodyVariants, smallMouthPaths } from '../InteractiveCharacters.animations.js';

const LEFT_EYE = { cx: -14, cy: -32 };
const RIGHT_EYE = { cx: 14, cy: -32 };
const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
const SmallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
    const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
    const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
    const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
    // Combine idle head movement with cursor tracking for head turning
    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.6);
    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.35);
    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.6);
    const stateEyelid = eyelidVariants[state].scaleY;
    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
    const isClickReaction = CLICK_STATES.has(state);
    const transition = isClickReaction ? clickTransition : bodyTransition;
    return (jsxs(motion.g, { animate: state, variants: smallBodyVariants, transition: transition, style: {
            originX: '50%',
            originY: '100%',
            x: idle.sway,
            y: idle.bob,
            scale: idle.breath,
        }, onClick: onClick, children: [jsx("path", { d: "M -45 0 Q -45 -60 0 -60 Q 45 -60 45 0 Z", fill: "#FACC15" }), jsxs(motion.g, { style: {
                    originX: '0px',
                    originY: '-30px',
                    rotate: combinedHeadRotate,
                    x: combinedHeadX,
                    y: combinedHeadY,
                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "small-eye-l", children: jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10 }) }), jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6, fill: "#1E293B", clipPath: "url(#small-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 3, cy: LEFT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2, cy: LEFT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 10, y: LEFT_EYE.cy - 10, width: 20, height: 20, fill: "#FACC15", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "small-eye-r", children: jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10 }) }), jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6, fill: "#1E293B", clipPath: "url(#small-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 3, cy: RIGHT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2, cy: RIGHT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 10, y: RIGHT_EYE.cy - 10, width: 20, height: 20, fill: "#FACC15", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -22, cy: -18, rx: 6, ry: 4, fill: "#FDE68A", opacity: state === 'excited' ? 0.85 : 0.6 }), jsx("ellipse", { cx: 22, cy: -18, rx: 6, ry: 4, fill: "#FDE68A", opacity: state === 'excited' ? 0.85 : 0.6 }), jsx(motion.path, { d: smallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: smallMouthPaths[state] }, transition: transition, transform: "translate(0, -14)" })] })] }));
};

export { SmallCharacter };
