import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getBoundingBox, resetPath } from '@remotion/paths';
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
export const CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
    const { fps } = useVideoConfig();
    const frame = useCurrentFrame();
    if (!countryPaths) {
        return null;
    }
    const joined = countryPaths.map((p) => p.d).join(' ');
    const reset = resetPath(joined);
    const boundingBox = getBoundingBox(reset);
    const progress = spring({
        fps,
        frame,
        delay: 10,
    });
    return (_jsxs(AbsoluteFill, { style: { overflow: 'hidden' }, children: [_jsx(AbsoluteFill, { style: {
                    transform: `scale(${progress})`,
                }, children: _jsx("svg", { viewBox: boundingBox.viewBox, style: {
                        scale: '0.8',
                    }, children: _jsx("path", { fill: theme === 'light' ? '#bbb' : '#222', d: reset }) }) }), _jsxs(AbsoluteFill, { style: {
                    alignItems: 'center',
                    justifyContent: 'center',
                }, children: [_jsx("div", { style: {
                            color: '#0b84f3',
                            fontFamily: 'GTPlanar',
                            fontWeight: '500',
                            fontSize: 13,
                            textAlign: 'center',
                            marginTop: -10,
                            width: '100%',
                            paddingLeft: 20,
                            paddingRight: 20,
                            transform: 'translateX(' + interpolate(progress, [0, 1], [-100, 0]) + '%)',
                        }, children: "Your country" }), _jsx("div", { style: {
                            lineHeight: 1.1,
                            fontFamily: 'GTPlanar',
                            textAlign: 'center',
                            fontWeight: '500',
                            fontSize: 30,
                            color: theme === 'dark' ? 'white' : 'black',
                            width: '100%',
                            paddingLeft: 20,
                            paddingRight: 20,
                            transform: 'translateX(' + interpolate(progress, [0, 1], [100, 0]) + '%)',
                        }, children: countryLabel })] })] }));
};
