import React from "react";
import { AbsoluteFill, Img, OffthreadVideo, staticFile } from "remotion";

// Shared layout for stat/chart scenes that must render above a talking head.
// Mirrors the structure SplitChart.tsx already uses (top 50% content, bottom
// 50% head clip, 2px seam). Caller renders its content as `children` — the
// children are placed into a 50%-height container, so each component should
// tune its own font sizes for half the frame height.

const isVideo = (s: string) => /\.(mp4|mov|webm)(\?|$)/i.test(s);
const resolveStatic = (s: string) => (s.startsWith("http") ? s : staticFile(s));

interface SplitHeadBelowProps {
  headSrc: string;
  backgroundColor?: string;
  headStartFrame?: number;
  topBackground?: string; // filled behind children if they don't paint their own
  children: React.ReactNode;
}

export const SplitHeadBelow: React.FC<SplitHeadBelowProps> = ({
  headSrc,
  backgroundColor = "#0a0612",
  headStartFrame,
  topBackground,
  children,
}) => {
  return (
    <AbsoluteFill style={{ backgroundColor, overflow: "hidden" }}>
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: "50%",
          overflow: "hidden",
          background: topBackground,
        }}
      >
        {children}
      </div>
      <div
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          height: "50%",
          overflow: "hidden",
          background: backgroundColor,
        }}
      >
        {isVideo(headSrc) ? (
          <OffthreadVideo
            src={resolveStatic(headSrc)}
            muted
            startFrom={headStartFrame}
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        ) : (
          <Img
            src={resolveStatic(headSrc)}
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        )}
      </div>
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: 0,
          right: 0,
          height: 2,
          transform: "translateY(-1px)",
          background: "rgba(255,255,255,0.15)",
          zIndex: 5,
          pointerEvents: "none",
        }}
      />
    </AbsoluteFill>
  );
};

// Auto-extracted from Props interface — see source for authoritative types.
// Component: SplitHeadBelow
// 5 props detected · 0 port(s)