import React from "react";
import { AbsoluteFill, OffthreadVideo, Sequence, staticFile } from "remotion";
import { ShortProps } from "./data/types";
import { HookTitle } from "./components/HookTitle";
import { BrandLines } from "./components/BrandLines";
import { SellingBadge } from "./components/SellingBadge";
import { EndCard } from "./components/EndCard";

// Higgsfield 완성본을 배경으로 깔고(오디오 포함), 자막/타이틀만 오버레이.
// 모든 콘텐츠는 props로 주입 (펜션/제품마다 교체).
export const MumumShort: React.FC<ShortProps> = ({
  videoSrc,
  hook,
  sellingPoint,
  brandLines,
  endCard,
}) => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <OffthreadVideo
        src={staticFile(videoSrc)}
        style={{ width: "100%", height: "100%", objectFit: "cover" }}
      />

      {/* 상단 후킹 타이틀 */}
      <Sequence from={hook.fromFrame} durationInFrames={hook.toFrame - hook.fromFrame}>
        <HookTitle
          eyebrow={hook.eyebrow}
          title={hook.title}
          fromFrame={0}
          toFrame={hook.toFrame - hook.fromFrame}
        />
      </Sequence>

      {/* 셀링포인트: 3개 독립 박스 */}
      <SellingBadge
        items={sellingPoint.items}
        fromFrame={sellingPoint.fromFrame}
        toFrame={sellingPoint.toFrame}
      />

      {/* 브랜드 감성 2줄 (상단 중앙) */}
      <BrandLines
        lines={brandLines.lines}
        fromFrame={brandLines.fromFrame}
        toFrame={brandLines.toFrame}
      />

      {/* 엔드카드 + AI 디스클로저 */}
      <EndCard
        brand={endCard.brand}
        location={endCard.location}
        disclosure={endCard.disclosure}
        fromFrame={endCard.fromFrame}
      />
    </AbsoluteFill>
  );
};
