import { CategoryContent } from '@/lib/types'
import { handleScrollTo } from '@/lib/utilities'

export default function FaqIndex({ pageCategories }: { pageCategories: CategoryContent[] }) {
  return (
    <div className="md:block hidden flex flex-row gap-8">
      <div className="border-l pl-8">
        <h3 className="text-h5 leading-none border-b-black border-b-4 pb-1 mb-5">Categories</h3>
        <div className="flex flex-col flex-wrap gap-2 sm:gap-4">
          {pageCategories.map((pageCategory, index) => {
            return (
              <button
                key={index}
                className="text-body underline underline-offset-8 text-left"
                data-scroll-to={pageCategory.categoryName}
                onClick={handleScrollTo}
              >
                {pageCategory.categoryName}
              </button>
            )
          })}
        </div>
      </div>
    </div>
  )
}