import React from 'react';
import { AbsoluteFill, Video } from 'remotion';

interface Props {
  top: string;
  bottom: string;
  ratio: number;
}

export default function VerticalSplit({ top, bottom, ratio }: Props) {
  // Clamp ratio defensively — prevents live-edit "0" / "2" values from
  // collapsing one half to nothing.
  const r = Math.max(0.05, Math.min(0.95, Number.isFinite(ratio) ? ratio : 0.5));
  const topPct = `${r * 100}%`;
  const bottomPct = `${(1 - r) * 100}%`;

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: topPct,
          overflow: 'hidden',
        }}
      >
        {top ? (
          <Video
            src={top}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            muted
          />
        ) : null}
      </div>
      <div
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: bottomPct,
          overflow: 'hidden',
        }}
      >
        {bottom ? (
          <Video
            src={bottom}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          />
        ) : null}
      </div>
    </AbsoluteFill>
  );
}

import { z } from 'zod';

export const Schema = z.object({
  top: z.string().describe('$port:video Top half (B-roll)'),
  bottom: z.string().describe('$port:video Bottom half (main subject)'),
  ratio: z.number().default(0.5),
});