"use client"

import { useGetSettingPage } from "@/hook/useCommon"
import { policyState } from "@/recoil"
import { Drawer } from "antd"
import { useEffect, useState } from "react"
import { useRecoilState } from "recoil"

export default function PrivacyPolicyDrawer() {
  const { data: dataSetting } = useGetSettingPage()
  const [dataPage, setDataPage] = useState<any>(null)
  const [openPolicy, setOpenPolicy] = useRecoilState(policyState)

  useEffect(() => {
    if (dataSetting && dataSetting?.data) {
      const page = dataSetting?.data?.find((item: any) => item.name === "Policy")
      setDataPage(page)
    }
  }, [dataSetting])

  return (
    <Drawer
      closable
      destroyOnClose
      title="About Wizzor"
      placement="right"
      open={openPolicy}
      onClose={() => setOpenPolicy(false)}
      width={594}>
      <div
        className="container pt-6 pb-8 mx-auto"
        dangerouslySetInnerHTML={{ __html: dataPage?.content || "" }}></div>
    </Drawer>
  )
}