"use client";

import React, { useEffect } from 'react';
import Script from 'next/script';

export default function DemoLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Initialize the widget when the script is loaded
  useEffect(() => {
    // Check if the widget script is loaded and the global object exists
    if (window.LiveChatWidget) {
      window.LiveChatWidget.init({
        roomCode: 'demo-room',
        appId: 'demo-app',
        theme: 'light',
        position: 'bottom-right'
      });
    }
  }, []);

  return (
    <div>
      {children}
      
      {/* Load the widget script */}
      <Script 
        src="/livechat-widget.js"
        strategy="afterInteractive"
        onLoad={() => {
          // Initialize the widget after the script is loaded
          if (window.LiveChatWidget) {
            window.LiveChatWidget.init({
              roomCode: 'demo-room',
              appId: 'demo-app',
              theme: 'light',
              position: 'bottom-right'
            });
          }
        }}
      />
    </div>
  );
}

// Add TypeScript declaration for the global LiveChatWidget
declare global {
  interface Window {
    LiveChatWidget?: {
      init: (config: {
        roomCode: string;
        appId: string;
        theme?: 'light' | 'dark';
        position?: string;
        roomName?: string;
        width?: string;
        height?: string;
        buttonText?: string;
        buttonIcon?: string;
        zIndex?: number;
      }) => void;
      open: () => void;
      close: () => void;
      toggle: () => void;
    };
  }
}