"use client"
import React from 'react'
import {useQuery} from "@tanstack/react-query";
import {getPolicy} from "@/shared/api/policySvc";
import Loader from "@/shared/ui/loader";
import { useTranslations } from 'next-intl';

const TermsSection = () => {
  const t = useTranslations("")
  const {data: policy, isLoading: policyIsLoading} = useQuery({
    queryKey: ["getPolicy"],
    queryFn: getPolicy
  })
  return (
      <div className={"profile-section-wrapper"}>
        <div className={"flex justify-between items-center mb-4"}>
          <div>
            <h1 className={"profile-section-title"}>{policy?.data.name}</h1>
            <span className={"profile-section-subtitle"}>{t("Offerta shartlari")}</span>
          </div>
        </div>
        {policyIsLoading ? <Loader height={"h-[30vh]"}/> : <div dangerouslySetInnerHTML={{__html: policy?.data?.body!}}/>}
      </div>
  )
}
export default TermsSection
