"use client"
import { useEffect } from 'react';

const KofiWidget = () => {
  useEffect(() => {
    // Dynamically create and append the script
    const script = document.createElement('script');
    script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js';
    script.async = true;
    script.onload = () => {
      if (typeof window !== 'undefined' && window.kofiWidgetOverlay) {
        window.kofiWidgetOverlay.draw('nulltranslationgroup', {
          'type': 'floating-chat',
          'floating-chat.donateButton.text': 'Support me',
          'floating-chat.donateButton.background-color': '#00b9fe',
          'floating-chat.donateButton.text-color': '#fff',
        });
      }
    };
    document.body.appendChild(script);

    return () => {
      // Clean up the script when the component unmounts
      document.body.removeChild(script);
    };
  }, []);

  return null; // No visible JSX; the widget is a floating overlay
};

export default KofiWidget;