import React, { cloneElement, isValidElement } from "react"
import { warning } from "./utils"

export function For<T>({
  collection,
  iterator,
}: {
  collection: T[]
  iterator: (item: T, index?: number) => React.ReactNode
}) {
  if (!Array.isArray(collection)) {
    warning("In For Component, collection should be an Array.")
    return null
  }
  return (
    <>
      {collection.map((item, index) => {
        const element = iterator(item, index)
        if (isValidElement(element) && !element.key) {
          return cloneElement(element, { key: index })
        }
        return element
      })}
    </>
  )
}