// RecorteForma: adesivo-explosão de papel (círculo de pontas) vermelho com texto grande em Abril Fatface, e uma tira rasgada preta com subtexto.
// Estoura com overshoot, gira em passos e balança. Serve de selo de data ou oferta.
import React from 'react';
import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from '../base';
import {rasgado} from '../lib/rasgado';

export type RecorteFormaProps = {texto: string; sub?: string; cor?: string; inicio?: number; y?: number; diametro?: number; tamanho?: number};
export const RecorteForma: React.FC<RecorteFormaProps> = ({texto, sub, cor = COR.vermelho, inicio = 0, y = 700, diametro = 800, tamanho = 280}) => {
  const f = useF() - inicio;
  const p = mola(seg(f, 0, 12), 2.4);
  const pts = Array.from({length: 48}).map((_, i) => { const a = (i / 48) * Math.PI * 2, r = i % 2 ? 0.86 : 1; return `${50 + Math.cos(a) * 50 * r}% ${50 + Math.sin(a) * 50 * r}%`; }).join(',');
  const linhas = texto.split('\n');
  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, diametro * 0.62, FONTE_TITULO, 400, 0)));
  const ps = mola(seg(f, 10, 20), 2);
  return <>
    <div style={{position: 'absolute', left: 540 - diametro / 2, top: y - diametro / 2, width: diametro, height: diametro, transform: `rotate(${(1 - p) * -120 + Math.sin(f / 5) * 2}deg) scale(${Math.max(0.01, p)})`, filter: 'drop-shadow(0 14px 10px rgba(0,0,0,0.4))'}}>
      <div style={{position: 'absolute', inset: 0, background: cor, clipPath: `polygon(${pts})`}} />
      <div style={{position: 'absolute', inset: '9%', border: `6px dashed ${COR.branco}`, borderRadius: '50%', opacity: 0.8}} />
      <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_TITULO, color: COR.branco, lineHeight: 0.95, fontSize: tam, textShadow: `6px 6px 0 ${COR.tinta}`}}>{linhas.map((l, i) => <div key={i}>{l}</div>)}</div>
    </div>
    {sub && <div style={{position: 'absolute', left: 540 - 330, top: y + diametro / 2 - 80, width: 660, height: 120, background: COR.tinta, clipPath: rasgado(660, 120, 4, 6, 26), display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_TEXTO, fontSize: caber(sub, 60, 580, FONTE_TEXTO, 400, 0), color: COR.amarelo, transform: `rotate(-3deg) scale(${Math.max(0.01, ps)})`, whiteSpace: 'nowrap'}}>{sub}</div>}
  </>;
};