import React from 'react'
import ButtonWrapper from '../Buttons/ButtonWrapper'
import ImportFreeBlockButton from '../Buttons/ImportFreeBlockButton'
import ItemCard from '../Card/ItemCard'
import useGlobalConfig from '../Contexts/useGlobalConfig'
import styles from '../Card/KitCard.module.scss'

const SearchResultItem = ({ item }) => {
  // We read the item downloaded value out of our global react context:
  const { getDownloadedItemId } = useGlobalConfig()
  return (
    <ItemCard
      Images={(
        <div className={styles.itemImageLink}>
          <img src={item.preview_image} alt={item.name} className={styles.itemImage} />
        </div>
      )}
      Buttons={(
        <ButtonWrapper>
          <ImportFreeBlockButton
            blockId={item.id}
            jsonUrl={item.import_file}
            importedBlockId={getDownloadedItemId(item.id)}
          />
        </ButtonWrapper>
      )}
      title={item.name}
      description=''
    />
  )
}

export default SearchResultItem