import React from "react"
import { Target } from "../interfaces/frontend"
import GamefieldPointer, { PointerProps } from "./GamefieldPointer"

function Targets({
  props: { composeTargetTiles, target, targetPreview },
}: {
  props: {
    composeTargetTiles: (target: Target) => PointerProps[]
    target: Target
    targetPreview: Target
  }
}) {
  return (
    <>
      {[
        ...composeTargetTiles(target).map((props, i) => (
          <GamefieldPointer key={"t" + i} props={props} />
        )),
        ...composeTargetTiles(targetPreview).map((props, i) => (
          <GamefieldPointer key={"p" + i} props={props} />
        )),
      ]}
    </>
  )
}

export default Targets
