import {FC, HTMLProps, useMemo} from "react"
import {Entity} from "../src/types"
import {useDetails} from "../src/hooks/useDetails"
import styles from './EntityIcon.module.css'

interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
  value: Entity|string
  amount?: number
}

export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
  const details = useDetails()
  const entity = useMemo<Entity>(() => {
    return typeof value === "object"
      ? value
      : details.find(detail => detail.href === value) ?? {
        href: value,
        name: value,
        image: value,
        recipe: undefined
      }
  }, [details, value])

  return <span className={styles.span} {...rest}>
    {/* eslint-disable-next-line @next/next/no-img-element */}
    <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
    {amount !== undefined && <span className={styles.amount}>{amount}</span>}
  </span>
}