import { useChildInstances } from '@weaverse/hydrogen'

function useChildInstances(id?: string): WeaverseItemStore[]

import {
  useChildInstances,
  useThemeSettings,
} from '@weaverse/hydrogen'
import { useEffect } from 'react'

export function ProductGrid() {
  const { gridColumns, gapSize } = useThemeSettings()
  const childInstances = useChildInstances()

  useEffect(() => {
    for (const child of childInstances) {
      child.setData({
        width: `calc(100% / ${gridColumns})`,
        margin: `${gapSize}px`,
      })
    }
  }, [childInstances, gridColumns, gapSize])

  return (
    <div className={`grid grid-cols-${gridColumns} gap-${gapSize}`}>
      {/* Child components rendered here by Weaverse */}
    </div>
  )
}

import { useChildInstances } from '@weaverse/hydrogen'
import { useEffect, useState } from 'react'

export function Carousel() {
  const [activeIndex, setActiveIndex] = useState(0)
  const slides = useChildInstances()

  useEffect(() => {
    slides.forEach((slide, index) => {
      slide.setData({
        isVisible: index === activeIndex,
        zIndex: index === activeIndex ? 10 : 1,
      })
    })
  }, [slides, activeIndex])

  return (
    <div className="carousel">
      <div className="carousel-container">
        {/* Slides rendered here by Weaverse */}
      </div>
      <div className="carousel-controls">
        {slides.map((slide, index) => (
          <button
            key={slide._id}
            onClick={() => setActiveIndex(index)}
            className={index === activeIndex ? 'active' : ''}
          >
            {index + 1}
          </button>
        ))}
      </div>
    </div>
  )
}

import { useChildInstances } from '@weaverse/hydrogen'
import { useMemo } from 'react'

export function ReviewsSection() {
  const reviewItems = useChildInstances()

  const averageRating = useMemo(() => {
    if (reviewItems.length === 0) return 0

    const total = reviewItems.reduce((sum, item) => {
      const { rating } = item.getSnapShot()
      return sum + (rating || 0)
    }, 0)

    return total / reviewItems.length
  }, [reviewItems])

  return (
    <div className="reviews-summary">
      <h2>Customer Reviews</h2>
      <div>{averageRating.toFixed(1)} / 5</div>
    </div>
  )
}

export let useChildInstances = (id?: string) => {
  let currentInstance = useItemInstance(id)
  if (!currentInstance) {
    return []
  }
  let { itemInstances } = Weaverse
  let {
    data: { children },
  } = currentInstance

  return children
    .map(({ id }: { id: string }) => itemInstances.get(id))
    .filter(Boolean) as WeaverseItemStore[]
}