import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { makeCircle, makePie } from '@remotion/shapes';
import { PALETTE } from '../layout/colors';
export const Progress = ({ progress }) => {
    const inner = makeCircle({
        radius: 10,
    });
    const outer = makePie({
        progress,
        closePath: false,
        radius: 10,
    });
    return (_jsxs("svg", { viewBox: `0 0 ${inner.width} ${inner.height}`, style: { overflow: 'visible', height: 22 }, children: [_jsx("path", { d: inner.path, stroke: PALETTE.BORDER_COLOR, strokeWidth: 4, fill: "transparent" }), _jsx("path", { d: outer.path, stroke: PALETTE.BRAND, strokeWidth: 4, fill: "transparent", strokeLinecap: "round" })] }));
};
