/**
 * ProductScene Component
 *
 * Product card with slide-up animation and highlight reveals.
 * Duration: ~7-8s
 */

import React from 'react';
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { ProductCard } from '../components/ProductCard';
import { darkPalette } from '../lib/colors';
import type { ProductScene as ProductSceneType } from '../types/video-script';

type ProductSceneProps = {
  scene: ProductSceneType;
};

export const ProductScene: React.FC<ProductSceneProps> = ({ scene }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Highlights reveal after half a second
  const revealProgress =
    scene.scrollBehavior === 'reveal-details'
      ? interpolate(frame, [fps * 0.5, fps * 1], [0, 1], {
          extrapolateRight: 'clamp',
        })
      : 1;

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        padding: 60,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}
    >
      <ProductCard
        name={scene.product.name}
        tagline={scene.product.tagline}
        price={scene.product.price}
        imageUrl={scene.product.imageUrl}
        highlights={scene.product.highlights}
        revealProgress={revealProgress}
      />
    </div>
  );
};
