"use client"

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

export default function AboutDrawer() {
  const { data: dataSetting } = useGetSettingPage()
    const [dataPage, setDataPage] = useState<any>(null)
    const [openAbout, setOpenAbout] = useRecoilState(aboutState)
  
    useEffect(() => {
      if (dataSetting && dataSetting?.data) {
        const page = dataSetting?.data?.find((item: any) => item.name === "About Us")
        setDataPage(page)
      }
    }, [dataSetting])

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