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

type Props = {
  pageCategories: CategoryContent[]
}

export default function GlossaryIndex({ pageCategories }: Props) {
  return (
    <div className="relative flex md:h-full pt-16 pb-10">
      <div className="grid md:w-36 gap-y-8 md:border-r md:pr-10 border-b md:border-b-0 pb-10">
        <h3 className="text-h9 uppercase">Jump to</h3>
        <div className="flex flex-wrap gap-2 sm:gap-4">
          {pageCategories.map((pageCategory, index) => {
            const isDisabled = !pageCategory.categoryItems
            return (
              <button
                key={index}
                className={cx(
                  'w-6 h-6 xs:w-9 xs:h-9 rounded-full bg-gray-light view-button text-[13px] xs:text-[16px] flex items-center justify-center',
                  {
                    'opacity-25': isDisabled,
                  }
                )}
                disabled={isDisabled}
                data-scroll-to={pageCategory.categoryName}
                onClick={handleScrollTo}
              >
                {pageCategory.categoryName}
              </button>
            )
          })}
        </div>
      </div>
    </div>
  )
}