import { Composition } from 'remotion';
import { ContactFormShowcase } from './compositions/ContactFormShowcase';
import { ButtonShowcase } from './compositions/ButtonShowcase';
import './style.css';

if (typeof window !== 'undefined') {
    (window as any).isRemotion = true;
}

export const RemotionRoot: React.FC = () => {
    return (
        <>
            <Composition
                id="ContactFormShowcase"
                component={ContactFormShowcase}
                durationInFrames={1500}
                fps={60}
                width={1080}
                height={1350}
            />
            <Composition
                id="ButtonShowcase"
                component={ButtonShowcase}
                durationInFrames={300} // 60fps * 5s
                fps={60}
                width={1080}
                height={1350} // 4:5 aspect ratio for LinkedIn/social
                defaultProps={{
                    text: "Let's work together",
                }}
            />
        </>
    );
};