import pageContentApi from '../api/pageContentApi'
import { useQuery } from 'react-query'
import Spinner from '@/core/components/elements/Spinner/Spinner'

const PageContent = ({ path }) => {
  const fetchContent = async () => await pageContentApi({ path })
  const content = useQuery(`content-${path}`, fetchContent)

  if (content.isLoading) {
    return (
      <div className='flex justify-center my-6'>
        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
      </div>
    )
  }

  if (content.data?.id) {
    let parsedContent = content.data.content
    parsedContent = parsedContent.replaceAll(
      'src="/web/image',
      `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
    )
    const contentClassNames = `
      prose 
      prose-gray 
      prose-a:text-danger-500 
      prose-p:my-0 
      prose-headings:my-0
      prose-headings:mb-1
      prose-img:my-0 
      prose-img:mb-1 
      prose-img:inline-block
      prose-hr:my-3
    `

    return (
      <article className='container mx-auto'>
        <div className={contentClassNames} dangerouslySetInnerHTML={{ __html: parsedContent }} />
      </article>
    )
  }

  return <></>
}

export default PageContent