'use client';
import { cache } from '@keystar/ui/style';
import { VoussoirProvider } from '@keystar/ui/core';
import { useServerInsertedHTML } from 'next/navigation';
import { forwardRef, useRef } from 'react';
import { U as UniversalNextLink } from './UniversalNextLink-5d3a16d7.esm.js';
import { jsx } from 'react/jsx-runtime';
import 'next/link';
import '@keystar/ui/link';

cache.compat = true;
const insertedKeys = Object.keys(cache.inserted);
const prevInsert = cache.insert;
cache.insert = function () {
  const serialized = arguments.length <= 1 ? undefined : arguments[1];
  if (cache.inserted[serialized.name] === undefined) {
    insertedKeys.push(serialized.name);
  }
  return prevInsert(...arguments);
};

/** @deprecated — use `NextRootProvider` instead. */
const RootVoussoirProvider = /*#__PURE__*/forwardRef(function RootVoussoirProvider(props, ref) {
  const lastIndexRef = useRef(0);
  useServerInsertedHTML(() => {
    const names = insertedKeys.slice(lastIndexRef.current);
    lastIndexRef.current = insertedKeys.length;
    if (names.length === 0) return null;
    let styles = '';
    for (const name of names) {
      styles += cache.inserted[name];
    }
    return /*#__PURE__*/jsx("style", {
      "data-emotion": `${cache.key} ${names.join(' ')}`,
      dangerouslySetInnerHTML: {
        __html: styles
      }
    }, Math.random().toString(36));
  });
  return /*#__PURE__*/jsx(VoussoirProvider, {
    ...props,
    UNSAFE_className: `${props.fontClassName}${props.UNSAFE_className ? ` ${props.UNSAFE_className}` : ''}`,
    ref: ref,
    elementType: "html",
    linkComponent: UniversalNextLink
  });
});

export { RootVoussoirProvider };
