// Fundo: osso liso, sem textura, com quatro cruzes de registro (como marcas de impressão) a 96 px das bordas. Só isso.
// Fica FORA da Camera. O vazio é o estilo: nada mais mora aqui.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** cor do chão */
  cor?: string;
  /** desliga as cruzes de registro */
  semMarcas?: boolean;
};

export const Fundo: React.FC<FundoProps> = ({cor = COR.osso, semMarcas = false}) =>
  <AbsoluteFill style={{background: cor}}>
    {!semMarcas && <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
      {[[96, 96], [984, 96], [96, 1824], [984, 1824]].map(([x, y], i) =>
        <path key={i} d={`M${x - 16} ${y} H${x + 16} M${x} ${y - 16} V${y + 16}`} stroke={COR.tinta} strokeOpacity={0.35} strokeWidth={3} strokeLinecap="round" />)}
    </svg>}
  </AbsoluteFill>;