import { useWeaverse, type WeaverseHydrogen } from '@weaverse/hydrogen'

function useWeaverse<T = Weaverse>(): T

import { useWeaverse, type WeaverseHydrogen } from '@weaverse/hydrogen'

export function NavigationControls() {
  const { itemInstances } = useWeaverse<WeaverseHydrogen>()

  const header = itemInstances.get('site-header')
  const announcementBar = itemInstances.get('announcement-bar')

  const toggleAnnouncementBar = () => {
    if (announcementBar) {
      announcementBar.setData({
        isVisible: !announcementBar.data.isVisible,
      })
    }
  }

  const toggleStickyHeader = () => {
    if (header) {
      header.setData({
        isSticky: !header.data.isSticky,
      })
    }
  }

  return (
    <div className="nav-controls">
      <button onClick={toggleAnnouncementBar}>
        {announcementBar?.data.isVisible ? 'Hide' : 'Show'} Announcement
      </button>
      <button onClick={toggleStickyHeader}>
        {header?.data.isSticky ? 'Disable' : 'Enable'} Sticky Header
      </button>
    </div>
  )
}

import { useWeaverse, type WeaverseHydrogen } from '@weaverse/hydrogen'

export function PageInfo() {
  const { data } = useWeaverse<WeaverseHydrogen>()
  const { id, name, items } = data

  return (
    <div className="page-info">
      <h1>Current Page: {name}</h1>
      <div>Page ID: {id}</div>
      <div>Total Items: {items.length}</div>
    </div>
  )
}