import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { MakeVideosLinks } from './MakeVideosLinks';
export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " agentically"] })), description = 'Turn your idea into a video using your coding agent.', showLinks = true, links = [
    { label: 'Agent Skills', href: '/docs/ai/skills' },
    { label: 'Prompts', href: '/prompts' },
], showVideo = true, videoSrc = '/img/render-progress.webm', fallbackVideoSrc = '/img/render-progress.mp4', }) => {
    const ref = useRef(null);
    const videoRef = useRef(null);
    useEffect(() => {
        const { current } = ref;
        if (!current) {
            return;
        }
        const callback = (data) => {
            var _a;
            if (data[0].isIntersecting) {
                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
            }
        };
        const observer = new IntersectionObserver(callback, {
            root: null,
            threshold: 0.5,
        });
        observer.observe(current);
        return () => observer.unobserve(current);
    }, []);
    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsxs("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", style: {
                        width: 400,
                        maxWidth: '100%',
                        maxHeight: '100%',
                        borderRadius: 7,
                        overflow: 'hidden',
                    }, className: "cursor-default! relative 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] })] }));
};
