import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from 'remotion';
const TrendingRepoItem = ({ repo, theme, number }) => {
    const frame = useCurrentFrame();
    const { fps } = useVideoConfig();
    const progress = spring({
        fps,
        frame,
        config: {
            damping: 200,
        },
        delay: number * 10 + 20,
    });
    const item = useMemo(() => {
        return {
            lineHeight: 1.1,
            fontFamily: 'GTPlanar',
            fontWeight: '500',
            color: theme === 'dark' ? 'white' : 'black',
            fontFeatureSettings: "'ss03' 1",
            opacity: progress,
        };
    }, [progress, theme]);
    return (_jsxs("div", { style: item, children: [number, ". ", repo] }));
};
export const TrendingRepos = ({ theme, trending }) => {
    const fill = theme === 'light' ? '#666' : '#999';
    const frame = useCurrentFrame();
    const { fps } = useVideoConfig();
    const progress1 = spring({
        fps,
        frame,
        config: {
            damping: 200,
        },
        delay: 0,
    });
    if (trending === null) {
        return null;
    }
    return (_jsx(AbsoluteFill, { children: _jsx(AbsoluteFill, { style: {
                justifyContent: 'center',
                paddingLeft: 20,
                paddingRight: 20,
            }, children: _jsxs("div", { children: [_jsx("div", { style: {
                            color: fill,
                            fontFamily: 'GTPlanar',
                            fontWeight: '500',
                            fontSize: 12,
                            opacity: progress1,
                        }, children: new Intl.DateTimeFormat('en-US', {
                            weekday: 'long',
                            month: 'long',
                            day: 'numeric',
                        }).format(new Date(trending.date)) }), _jsx("div", { style: {
                            color: '#0b84f3',
                            fontFamily: 'GTPlanar',
                            fontWeight: '500',
                            fontSize: 16,
                            marginBottom: 15,
                            opacity: progress1,
                            lineHeight: 1,
                        }, children: "Trending repositories" }), _jsx(TrendingRepoItem, { number: 1, repo: trending.repos[0], theme: theme }), _jsx(TrendingRepoItem, { number: 2, repo: trending.repos[1], theme: theme }), _jsx(TrendingRepoItem, { number: 3, repo: trending.repos[2], theme: theme })] }) }) }));
};
