// Monitor: o aparelho que segura a tela do produto. Borda fina escura, pé e base, sombra macia na parede.
// A tela (1500 x 940) é creme, com uma luz que cai do canto de cima. As cenas vivem dentro dela.
// `semAparelho`: só a tela, sem borda nem pé (pra quem não quer o monitor).
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {CENTRO_VIDEO, COR, TELA} from '../base';

export type MonitorProps = {semAparelho?: boolean; borda?: number; children?: React.ReactNode};

export const Monitor: React.FC<MonitorProps> = ({semAparelho = false, borda = 20, children}) => {
  const x0 = CENTRO_VIDEO.x - TELA.w / 2, y0 = CENTRO_VIDEO.y - TELA.h / 2;
  const b = semAparelho ? 0 : borda;
  return <AbsoluteFill>
    {!semAparelho && <>
      <div style={{position: 'absolute', left: CENTRO_VIDEO.x - 34, top: y0 + TELA.h + b - 10, width: 68, height: 300,
        background: 'linear-gradient(90deg, #110F0E, #24211E 45%, #110F0E)'}} />
      <div style={{position: 'absolute', left: CENTRO_VIDEO.x - 260, top: y0 + TELA.h + b + 280, width: 520, height: 46, borderRadius: 14,
        background: 'linear-gradient(180deg, #3A3530, #161412)', boxShadow: '0 30px 60px rgba(0,0,0,0.6)'}} />
      <div style={{position: 'absolute', left: x0 - b, top: y0 - b, width: TELA.w + b * 2, height: TELA.h + b * 2, borderRadius: 18,
        background: COR.moldura, boxShadow: '0 60px 140px rgba(0,0,0,0.55), 0 0 0 2px #2A2724, inset 0 1px 0 rgba(255,255,255,0.08)'}} />
    </>}
    <div style={{position: 'absolute', left: x0, top: y0, width: TELA.w, height: TELA.h, overflow: 'hidden', background: COR.tela,
      borderRadius: semAparelho ? 0 : 4}}>
      {children}
      <AbsoluteFill style={{pointerEvents: 'none', background: 'linear-gradient(165deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%, rgba(60,40,20,0.07) 100%)'}} />
    </div>
  </AbsoluteFill>;
};