import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { PALETTE } from '../layout/colors';
const viewBox = 100;
const lines = 8;
const className = '__remotion_spinner_line';
const remotionSpinnerAnimation = '__remotion_spinner_animation';
// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
export const Spinner = ({ size, duration }) => {
    const style = useMemo(() => {
        return {
            width: size,
            height: size,
        };
    }, [size]);
    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
				@keyframes ${remotionSpinnerAnimation} {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0.15;
          }
        }
        
        .${className} {
            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
        }        
			` }), _jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
                    return (_jsx("path", { className: className, style: {
                            rotate: `${(index * Math.PI * 2) / lines}rad`,
                            transformOrigin: 'center center',
                            animationDelay: `${index * (duration / lines) - duration}s`,
                        }, d: translated, fill: PALETTE.TEXT_COLOR }, index));
                }) })] }));
};
