/**
 * Remotion Composition Template
 * Base structure for Remotion video components
 */

import React from 'react';
import { Composition } from 'remotion';

interface CompositionProps {
  title: string;
  duration: number;
}

export const ExampleComposition: React.FC<CompositionProps> = ({ title, duration }) => {
  return (
    <div
      style={{
        flex: 1,
        textAlign: 'center',
        backgroundColor: '#1e1e2e',
        color: '#ffffff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 48,
        fontWeight: 'bold',
        fontFamily: 'Arial, sans-serif',
      }}
    >
      {title}
    </div>
  );
};

export const defaultCompositions = [
  {
    id: 'example',
    component: ExampleComposition,
    durationInFrames: 150,
    fps: 30,
    width: 1920,
    height: 1080,
    props: {
      title: 'Welcome to Remotion',
      duration: 150,
    },
  },
];

export default ExampleComposition;