import { useItemInstance } from '@weaverse/hydrogen'

function useItemInstance(id?: string): WeaverseItemStore | null

import { useItemInstance } from '@weaverse/hydrogen'

export function ProductDetails() {
  const item = useItemInstance()

  if (!item) return null

  const { product, selectedVariant, showPricing } = item.data

  return (
    <div className="product-details">
      <h2>{product.title}</h2>
      {showPricing && selectedVariant && (
        <div className="price">${selectedVariant.price.amount}</div>
      )}
    </div>
  )
}

import { useItemInstance } from '@weaverse/hydrogen'

export function ProductFilterControls() {
  const productGrid = useItemInstance('product-grid-main')

  if (!productGrid) return null

  const { filters, activeFilters } = productGrid.data

  const toggleFilter = (filterId: string) => {
    const nextActiveFilters = activeFilters.includes(filterId)
      ? activeFilters.filter((id: string) => id !== filterId)
      : [...activeFilters, filterId]

    productGrid.setData({ activeFilters: nextActiveFilters })
  }

  return (
    <div className="filter-controls">
      {filters.map((filter) => (
        <button
          key={filter.id}
          onClick={() => toggleFilter(filter.id)}
          className={activeFilters.includes(filter.id) ? 'active' : ''}
        >
          {filter.label}
        </button>
      ))}
    </div>
  )
}

import { useItemInstance } from '@weaverse/hydrogen'
import { useEffect, useState, type RefObject } from 'react'

export function useClosestWeaverseItem(
  ref: RefObject<HTMLElement | null>
) {
  const [weaverseId, setWeaverseId] = useState('')
  const weaverseItem = useItemInstance(weaverseId)

  useEffect(() => {
    if (!weaverseItem && ref.current) {
      const closest = ref.current.closest('[data-wv-id]')
      setWeaverseId(closest?.getAttribute('data-wv-id') ?? '')
    }
  }, [ref, weaverseItem])

  return weaverseItem
}