import { connectHits } from "react-instantsearch-dom"
import { IHit } from "../../types"
import GridItem from "../GridItem"
import React from "react"
import * as styles from "./styles.module.scss"

interface IProps {
  hits: [IHit]
}

const Hits = ({ hits }: IProps) => (
  <ol className={styles.grid}>
    {hits.map(hit => (
      <li className={styles.hit} key={hit.objectID}>
        <GridItem hit={hit} />
      </li>
    ))}
  </ol>
)

const CustomHits = connectHits(Hits)

export default CustomHits
