import { useEffect, useState } from 'react'

interface DirectionConfig {
  isRtl: boolean
  direction: 'ltr' | 'rtl'
  locale: string
  language: string
}

/**
 * Hook for RTL/LTR direction support
 */
export function useDirection(): DirectionConfig {
  const [config] = useState<DirectionConfig>(() => {
    // Get initial config from WordPress
    const wpConfig = window.boostbotAdmin?.directionConfig
    
    return {
      isRtl: wpConfig?.isRtl ?? false,
      direction: wpConfig?.direction ?? 'ltr',
      locale: wpConfig?.locale ?? 'en_US',
      language: wpConfig?.language ?? 'en',
    }
  })
  
  useEffect(() => {
    // Set document direction
    document.documentElement.dir = config.direction
    document.documentElement.lang = config.language
    
    // Add RTL class to body
    if (config.isRtl) {
      document.body.classList.add('rtl')
    } else {
      document.body.classList.remove('rtl')
    }
  }, [config])
  
  return config
}

