import { ref, onMounted } from 'vue'
import { wordpressMenuService, type WpMenuItem } from '@/services/wordpress-menu'


const HEADER_MENU_ID = '2' //id menu

export function useWordpressMenu() {
  const menuItems = ref<WpMenuItem[]>([])
  const loading = ref(false)
  const error = ref<string | null>(null)

  const fetchMenu = async () => {
    loading.value = true
    error.value = null

    try {
      const items = await wordpressMenuService.getMenuItems(HEADER_MENU_ID)

      menuItems.value = items.map(item => ({
        ...item,
        to: wordpressMenuService.convertToRouterLink(item.url),
        label: item.title
      }))

    } catch (e: any) {
      error.value = e.message || 'Error fetching menu'
      console.error('Failed to load menu:', e)
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchMenu()
  })

  return {
    menuItems,
    loading,
    error,
    refreshMenu: fetchMenu
  }
}
