import {FC} from "react"
import {Recipe} from "../src/types"
import {EntityIcon} from "./EntityIcon";
import styles from './Recipe.module.css'

interface Props {
  recipe: Recipe
}

export const RecipeSpan: FC<Props> = ({recipe}) => {
  const joinByPlus = (elems: JSX.Element[]) => elems.reduce((acc, curr) => {
    if (acc.length) {
      return [...acc, '+', curr]
    } else {
      return [curr]
    }
  }, [] as (JSX.Element|string)[])
  const before = Object.entries({...recipe.prerequisites}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
  const after = Object.entries({...recipe.output}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
  return <span className={styles.recipe}>
    {joinByPlus(before)} → {joinByPlus(after)}
  </span>
}