import { memo, useMemo } from 'react';
import { motion } from 'motion/react';
import { SEYAR_INFO, SEYAR_SVG, type SeyarChar, type SeyarMood } from './seyar';

interface Props {
  char: SeyarChar;
  mood?: SeyarMood;
  size?: number;
  /** بالا و پایین رفتنِ آرام، برای ماسکوتی که منتظر است. */
  bob?: boolean;
  className?: string;
}

function SeyarMascotBase({ char, mood = 'idle', size = 100, bob = false, className }: Props) {
  const svg = useMemo(() => SEYAR_SVG[char](mood), [char, mood]);
  return (
    <motion.div
      key={char + mood}
      role="img"
      aria-label={SEYAR_INFO[char].name}
      className={className}
      initial={{ scale: 0.8, opacity: 0 }}
      animate={{ scale: 1, opacity: 1, y: bob ? [0, -6, 0] : 0 }}
      transition={
        bob
          ? { y: { duration: 1.8, repeat: Infinity, ease: 'easeInOut' }, scale: { type: 'spring', stiffness: 280, damping: 18 } }
          : { type: 'spring', stiffness: 280, damping: 18 }
      }
      style={{ width: size, height: size, lineHeight: 0, flexShrink: 0 }}
      // SVG از seyar.ts ساخته می‌شود و هیچ ورودیِ کاربر در آن نیست.
      dangerouslySetInnerHTML={{ __html: svg }}
    />
  );
}

export const SeyarMascot = memo(SeyarMascotBase);