import { FC, HTMLProps } from 'react'
import { Recipe } from '../../../src/types'
import cx from 'classnames'
import styles from './NodeDetails.module.css'
import { RecipeSpan } from '../../home/Recipe/Recipe'
import { GraphNode } from '../../../src/graph-untangle/types'

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>
  )
}