import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { MakeVideosLinks } from './MakeVideosLinks';
export const MakeVideosInteractively = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " interactively"] })), description = 'Edit and animate using drag and drop and save back to code.', showLinks = true, links = [{ label: 'Remotion Studio', href: '/docs/studio' }], showVideo = true, videoSrc = '/img/editing-vp9-chrome.webm', fallbackVideoSrc = '/img/editing-safari.mp4', }) => {
    const ref = useRef(null);
    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsxs("video", { autoPlay: true, muted: true, playsInline: true, loop: true, preload: "metadata", style: {
                        width: 500,
                        maxWidth: '100%',
                        maxHeight: '100%',
                        borderRadius: 7,
                        overflow: 'hidden',
                    }, className: "object-contain", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
};
