'use client';

import { motion } from 'framer-motion';
import { MASCOT_SKINS, type MascotSkin } from '@/lib/skins';

type Mood = 'idle' | 'happy' | 'sad' | 'wave';

export type { MascotSkin };
export { MASCOT_SKINS };

/**
 * "তারা" — WonderKids' friendly star mascot. Pure inline SVG so it scales
 * crisply and needs no assets. Blinks periodically and supports colour skins.
 */
export default function Mascot({
  mood = 'idle',
  size = 96,
  className = '',
  skin,
}: {
  mood?: Mood;
  size?: number;
  className?: string;
  skin?: MascotSkin;
}) {
  const eyeY = mood === 'happy' ? 40 : 42;
  const colors = skin ?? MASCOT_SKINS.classic.skin;

  return (
    <motion.div
      className={className}
      style={{ width: size, height: size }}
      animate={
        mood === 'sad' ? { rotate: [0, -4, 4, -4, 0] } : { y: [0, -6, 0] }
      }
      transition={
        mood === 'sad'
          ? { duration: 0.4 }
          : { duration: 3, repeat: Infinity, ease: 'easeInOut' }
      }
      aria-hidden
    >
      <svg viewBox="0 0 100 100" width={size} height={size}>
        <path
          d="M50 8c3 0 5 2 6 5l7 16 17 2c6 1 8 8 4 12l-12 12 3 17c1 6-5 10-10 7l-15-8-15 8c-5 3-11-1-10-7l3-17-12-12c-4-4-2-11 4-12l17-2 7-16c1-3 3-5 6-5z"
          fill={colors.body}
          stroke={colors.stroke}
          strokeWidth="3"
          strokeLinejoin="round"
        />
        <circle cx="34" cy="52" r="5" fill="#FF8B5E" opacity="0.5" />
        <circle cx="66" cy="52" r="5" fill="#FF8B5E" opacity="0.5" />

        {mood === 'happy' ? (
          <>
            <path d="M36 44c2-3 6-3 8 0" fill="none" stroke="#3B322B" strokeWidth="3" strokeLinecap="round" />
            <path d="M56 44c2-3 6-3 8 0" fill="none" stroke="#3B322B" strokeWidth="3" strokeLinecap="round" />
          </>
        ) : (
          <motion.g
            style={{ transformOrigin: '50px 42px', transformBox: 'fill-box' } as any}
            animate={{ scaleY: [1, 1, 0.1, 1] }}
            transition={{ duration: 0.5, repeat: Infinity, repeatDelay: 2.6, times: [0, 0.85, 0.92, 1] }}
          >
            <circle cx="40" cy={eyeY} r="4" fill="#3B322B" />
            <circle cx="60" cy={eyeY} r="4" fill="#3B322B" />
          </motion.g>
        )}

        {mood === 'sad' ? (
          <path d="M42 60c4-4 12-4 16 0" fill="none" stroke="#3B322B" strokeWidth="3" strokeLinecap="round" />
        ) : (
          <path d="M42 58c4 6 12 6 16 0" fill="none" stroke="#3B322B" strokeWidth="3" strokeLinecap="round" />
        )}
      </svg>
    </motion.div>
  );
}