import { createContext, useContext, type ReactNode } from 'react';

const DemoModeContext = createContext(false);

export function DemoModeProvider({ enabled, children }: { enabled: boolean; children: ReactNode }) {
  return <DemoModeContext.Provider value={enabled}>{children}</DemoModeContext.Provider>;
}

export function useDemoMode() {
  return useContext(DemoModeContext);
}

export default function Blur({ children }: { children: ReactNode }) {
  const demo = useContext(DemoModeContext);
  if (!demo) return <>{children}</>;
  return <span className="blur-[5px] select-none">{children}</span>;
}