// SolListrado: o sol (degradê `#FFD23F → #FF2A6D`, brilho rosa) com listras pretas que engrossam para baixo e descem 0,25 unidade
// por quadro. Nasce do horizonte (sobe 700 px com sobra em 22 quadros) e é cortado pelo horizonte em y = 1180.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, eb} from '../base';
import {HORIZONTE} from '../texturas/Fundo';

export type SolListradoProps = {diametro?: number; y?: number; x?: number; inicio?: number; fim?: number};

export const SolListrado: React.FC<SolListradoProps> = ({diametro = 720, y = 880, x = 540, inicio = 0, fim}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || (fim !== undefined && f >= fim)) return null;
  const p = eb(t / 22, 1.3);
  const barras = Array.from({length: 8}, (_, k) => {
    const pos = (k * 7 + t * 0.25) % 56;
    const yy = 44 + pos;
    return {y: yy, h: 0.6 + ((yy - 44) / 56) * 6};
  });
  return <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, overflow: 'hidden'}}>
    <svg viewBox="0 0 100 100" style={{position: 'absolute', left: x - diametro / 2, top: y - diametro / 2 + (1 - p) * 700, width: diametro, height: diametro, overflow: 'visible', filter: 'drop-shadow(0 0 40px rgba(255,42,109,0.6))'}}>
      <defs>
        <linearGradient id="sol-g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={COR.sol} /><stop offset="1" stopColor={COR.rosa} /></linearGradient>
        <mask id="sol-m"><rect width="100" height="100" fill="#fff" />{barras.map((b, i) => <rect key={i} x="0" y={b.y} width="100" height={b.h} fill="#000" />)}</mask>
      </defs>
      <circle cx="50" cy="50" r="50" fill="url(#sol-g)" mask="url(#sol-m)" />
    </svg>
  </div>;
};