"use client"

import React, { useState } from 'react'
import Fuse from 'fuse.js'

const data = [
  { title: 'Document 1', content: 'Content of document 1', url: '/inventory' },
  { title: 'Document 2', content: 'Content of document 2', url: '/about' },
]

const fuse = new Fuse(data, {
  keys: ['title', 'content'],
})

const Search = () => {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])

  const handleSearch = (event: any) => {
    const { value } = event.target
    setQuery(value)
    if (value.trim()) {
      const searchResults = fuse.search(value).map(({ item }) => item)
      setResults(searchResults)
    } else {
      setResults([])
    }
  }

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Search documentation"
      />
      <ul>
        {results.map((result, index) => (
          <li key={index}>
            <a href={result.url}>
              <h3>{result.title}</h3>
              <p>{result.content}</p>
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default Search