"use client"
import { motion } from "framer-motion"
import { useGetPrivacyPolicy } from "@/lib/react-query/hooks/privacy-policy"
import { HtmlParser } from "@/components/common/HtmlParser"

export default function PrivacyPolicy() {
  const { data: privacyData, isLoading } = useGetPrivacyPolicy()

  if (isLoading) {
    return (
      <section className="py-16 lg:py-24 px-4 lg:px-20 bg-gray-50 min-h-screen">
        <div className="max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-16"
          >
            <div className="h-12 bg-gray-200 rounded animate-pulse w-80 mx-auto mb-4"></div>
            <div className="h-4 bg-gray-200 rounded animate-pulse w-96 mx-auto"></div>
          </motion.div>

          <div className="space-y-8">
            {[...Array(5)].map((_, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, delay: index * 0.1 }}
                className="h-24 bg-gray-200 rounded animate-pulse"
              ></motion.div>
            ))}
          </div>
        </div>
      </section>
    )
  }

  return (
    <section className="py-16 lg:py-24 px-4 lg:px-20 bg-gray-50 min-h-screen">
      <div className="max-w-4xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
            <span className="text-black">Privacy </span>
            <span className="gradient-text">Policy</span>
          </h1>
          <p className="text-gray-600 text-lg max-w-3xl mx-auto leading-relaxed">
            Your privacy is important to us. Learn how we collect, use, and protect your personal information.
          </p>
        </motion.div>

        {privacyData && (
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="bg-white rounded-lg shadow-sm p-8 lg:p-12"
          >
            <HtmlParser html={privacyData.content} />
          </motion.div>
        )}

        {!privacyData && (
          <div className="text-center py-12">
            <p className="text-gray-500">Loading privacy policy content...</p>
          </div>
        )}
      </div>
    </section>
  )
}