import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useId } from 'react';
export const CanvasSectionTitle = ({ children }) => {
    const svgId = useId().replace(/:/g, '');
    const glowFilterId = `title-glow-${svgId}`;
    const glowClipId = `title-glow-clip-${svgId}`;
    return (_jsxs(_Fragment, { children: [_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute w-full overflow-visible h-20", focusable: "false", preserveAspectRatio: "none", viewBox: "0 0 1200 320", children: [_jsx("g", { clipPath: `url(#${glowClipId})`, filter: `url(#${glowFilterId})`, children: _jsx("ellipse", { cx: "600", cy: "320", fill: "rgba(0, 0, 0, 0.1)", rx: "400", ry: '100' }) }), _jsxs("defs", { children: [_jsx("filter", { id: glowFilterId, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "1120", width: "2000", x: "-400", y: "-480", children: _jsx("feGaussianBlur", { stdDeviation: "140" }) }), _jsx("clipPath", { id: glowClipId, clipPathUnits: "userSpaceOnUse", children: _jsx("rect", { height: "320", width: "2000", x: "-400", y: "0" }) })] })] }), _jsx("div", { className: "relative h-24 w-full overflow-visible", children: _jsx("div", { className: "relative z-10 flex h-full items-end justify-center", children: _jsx("h2", { className: "m-0 text-center text-4xl leading-none text-black", style: {
                            fontFamily: 'GTPlanarVF, GTPlanar, sans-serif',
                            fontVariationSettings: "'slnt' 0, 'wght' 700",
                            fontStyle: 'normal',
                            fontWeight: 700,
                            paddingBottom: 16,
                        }, children: children }) }) })] }));
};
