import { useParentInstance } from '@weaverse/hydrogen'

function useParentInstance(): WeaverseItemStore | null

import { useParentInstance } from '@weaverse/hydrogen'

export function ProductItems() {
  const parent = useParentInstance()
  const products = parent?.data.loaderData?.products

  if (!products) return null

  return (
    <div className="product-grid">
      {products.nodes.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}

import { useParentInstance } from '@weaverse/hydrogen'

export function ReviewItem() {
  const parent = useParentInstance()

  if (!parent) return null

  const { showVerifiedBadge, verifiedBadgeText, showDate } = parent.data

  return (
    <div className="review-item">
      {/* Review content */}
      {showVerifiedBadge && (
        <span className="verified-badge">{verifiedBadgeText}</span>
      )}
      {showDate && <div className="review-date">{/* Date content */}</div>}
    </div>
  )
}

import { useParentInstance } from '@weaverse/hydrogen'
import { useEffect } from 'react'
import { useFetcher } from 'react-router'

export function ProductReviewList() {
  const { load, data } = useFetcher()
  const parent = useParentInstance()
  const handle = parent?.data.product?.handle

  useEffect(() => {
    if (handle) {
      load(`/api/product/${handle}/reviews`)
    }
  }, [handle, load])

  // Render the review data
}

export let useParentInstance = () => {
  let { parentId } = useContext(WeaverseItemContext)
  return useItemInstance(parentId || '')
}