"use client";

import { useEffect, useState } from "react";

interface DemoWrapperProps {
  children: React.ReactNode;
}

export function DemoWrapper({ children }: DemoWrapperProps) {
  const [showDemo, setShowDemo] = useState<boolean>(true);
  const [isMounted, setIsMounted] = useState<boolean>(false);

  useEffect(() => {
    setIsMounted(true);
    const checkDemo = () => {
      const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
      setShowDemo(!disabled);
    };

    checkDemo();
    window.addEventListener('storage_demo_changed', checkDemo);
    return () => window.removeEventListener('storage_demo_changed', checkDemo);
  }, []);

  if (!isMounted) {
    return <>{children}</>;
  }

  if (!showDemo) {
    return null;
  }

  return <>{children}</>;
}