'use client'

import { useEffect, useState } from 'react'

// Extend Window interface to include tailwind
declare global {
  interface Window {
    tailwind?: {
      config?: any;
    };
  }
}

export function TailwindLoader() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)

    // Load Tailwind only after React hydration is complete
    if (typeof window !== 'undefined' && !window.tailwind) {
      const tailwindScript = document.createElement('script')
      tailwindScript.src = 'https://cdn.tailwindcss.com'
      tailwindScript.onload = () => {
        // Configure Tailwind after it loads
        if (window.tailwind) {
          window.tailwind.config = {
            darkMode: 'class',
            theme: {
              extend: {}
            }
          }
        }
      }
      document.head.appendChild(tailwindScript)
    }
  }, [])

  // Don't render anything during SSR to avoid hydration mismatch
  if (!mounted) {
    return null
  }

  return null
}