import { useParentInstance } from '@weaverse/next'

function useParentInstance(): WeaverseItemStore | null

'use client'

import { useParentInstance } from '@weaverse/next'

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>
  )
}

'use client'

import { useParentInstance } from '@weaverse/next'

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>
  )
}

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