'use client'

import Giscus from '@giscus/react'

import { useTheme } from '@/theme/theme.client'
import type { CookiesStore } from '@/utils/constants'

interface BlogPostCommentsProps {
  cookiesStore: CookiesStore
}

export const BlogPostComments = (props: BlogPostCommentsProps): JSX.Element => {
  const { cookiesStore } = props

  const theme = useTheme(cookiesStore)

  return (
    <Giscus
      id='comments'
      repo='theoludwig/theoludwig'
      repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
      category='General'
      categoryId='DIC_kwDOFWUewM4CQ_WK'
      mapping='pathname'
      reactionsEnabled='1'
      emitMetadata='0'
      inputPosition='top'
      theme={theme}
      lang='en'
      loading='lazy'
    />
  )
}