import {FC, HTMLProps} from "react";
import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
import {Recipe} from "../../../src/types";
import cx from "classnames";
import styles from "./NodeDetails.module.css";
import {RecipeSpan} from "../../home/Recipe/Recipe";

export type DetailGraphNode = GraphNode<{
  recipes: Recipe[]
}>

interface Props extends HTMLProps<HTMLDivElement> {
  node: DetailGraphNode
}

export const NodeDetails: FC<Props> = ({node, className, ...props}) => {
  return <div {...props} className={cx(className, styles.root)}>
    <h3>{node.name}</h3>
    {node.recipes.map((recipe, idx) => <RecipeSpan key={idx} recipe={recipe}/>)}
  </div>
}