// DestaqueCaixa: o foco no controle da vez, dentro da janela. Anel laranja de 4 px (raio 16) que chega
// grande (1,25 → 1) e pulsa 3%, e um holofote: o resto da janela escurece 22%.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, e5, seg} from '../base';

export type DestaqueCaixaProps = {x: number; y: number; largura: number; altura: number; de: number; ate: number; holofote?: boolean};

export const DestaqueCaixa: React.FC<DestaqueCaixaProps> = ({x, y, largura, altura, de, ate, holofote = true}) => {
  const f = useCurrentFrame();
  if (f < de || f > ate + 8) return null;
  const t = e5(seg(f, de, de + 8)) * (1 - seg(f, ate, ate + 8));
  const s = 1.25 - 0.25 * e5(seg(f, de, de + 10)) + 0.03 * Math.sin(f / 4);
  const p = 10;
  return <div style={{position: 'absolute', left: x - p, top: y - p, width: largura + p * 2, height: altura + p * 2, borderRadius: 18, border: `4px solid ${COR.acento}`, opacity: t,
    transform: `scale(${s})`, boxShadow: holofote ? `0 0 0 3000px rgba(20,22,26,${0.22 * t})` : undefined}} />;
};