import type React from "react";
import { useState } from "react";

/**
 * Wrapper component for rendering stateful component examples in MDX
 * Provides useState functionality for components that need state management
 */
export const ComponentExample = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return <div className={className}>{children}</div>;
};

/**
 * Hook provider for component examples that need shared state
 * Components should be available directly from MDX components scope
 */
export const ExampleStateProvider = <T,>({
  children,
  initialValue,
}: {
  children: (value: T, setValue: (value: T) => void) => React.ReactNode;
  initialValue?: T;
}) => {
  const [value, setValue] = useState<T>(initialValue as T);
  return <>{children(value, setValue)}</>;
};