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

interface IProps {
  highlight: any
  attribute: string
  hit: IHit
}

const Highlight = ({ highlight, attribute, hit }: IProps) => {
  const parsedHit = highlight({
    highlightProperty: "_highlightResult",
    attribute,
    hit,
  })

  return (
    <>
      {parsedHit.map((part, index) =>
        part.isHighlighted ? (
          <mark className={styles.mark} key={index}>
            {part.value}
          </mark>
        ) : (
          <span key={index}>{part.value}</span>
        )
      )}
    </>
  )
}

const CustomHighlight = connectHighlight(Highlight)

export default CustomHighlight
