// FormaMassa: formas pequenas de massinha (estrela, coração, flor, gota) feitas em SVG com gradiente, contorno claro e sombra. Apoio: cai, quica e gira em passos.
import React from 'react';
import {COR, mola, seg, useF} from '../base';
import {pulo, tom} from '../lib/argila';

export type FormaMassaProps = {nome?: 'estrela' | 'coracao' | 'flor' | 'gota'; x?: number; y?: number; tam?: number; cor?: string; inicio?: number};
const estrela = Array.from({length: 10}).map((_, i) => { const r = i % 2 ? 26 : 48, a = (i / 10) * Math.PI * 2 - Math.PI / 2; return `${50 + Math.cos(a) * r},${52 + Math.sin(a) * r}`; }).join(' ');
export const FormaMassa: React.FC<FormaMassaProps> = ({nome = 'estrela', x = 800, y = 360, tam = 280, cor = COR.amarelo, inicio = 0}) => {
  const f = useF() - inicio;
  const p = mola(seg(f, 0, 12), 1.8);
  const hop = p >= 1 ? pulo(f - 12, 56, 40) : {y: 0, sx: 1, sy: 1};
  const id = `fm-${nome}`;
  const corpo = nome === 'coracao' ? <path d="M50 90 C8 58 4 26 28 16 C40 11 50 22 50 30 C50 22 60 11 72 16 C96 26 92 58 50 90Z" />
    : nome === 'gota' ? <path d="M50 6 C70 36 88 52 88 68 C88 86 70 96 50 96 C30 96 12 86 12 68 C12 52 30 36 50 6Z" />
      : nome === 'flor' ? <g>{[0, 72, 144, 216, 288].map((a) => <ellipse key={a} cx="50" cy="26" rx="19" ry="25" transform={`rotate(${a} 50 50)`} />)}<circle cx="50" cy="50" r="20" /></g>
        : <polygon points={estrela} strokeLinejoin="round" />;
  return <div style={{position: 'absolute', left: x - tam / 2, top: y - tam / 2 + (1 - p) * -900 - hop.y, width: tam, height: tam, transformOrigin: '50% 100%', transform: `rotate(${Math.sin(f / 9) * 6}deg) scale(${hop.sx}, ${hop.sy})`, filter: 'drop-shadow(0 18px 12px rgba(20,60,60,0.3))'}}>
    <svg viewBox="0 0 100 100" width={tam} height={tam} style={{overflow: 'visible'}}>
      <defs><radialGradient id={id} cx="32%" cy="26%" r="80%"><stop offset="0" stopColor={tom(cor, 0.45)} /><stop offset="0.45" stopColor={cor} /><stop offset="1" stopColor={tom(cor, -0.3)} /></radialGradient></defs>
      <g fill={`url(#${id})`} stroke={tom(cor, 0.4)} strokeWidth="2.4">{corpo}</g>
    </svg>
  </div>;
};