import { useSettings } from "@/hooks/use-settings";
import { Loader2 } from "lucide-react";
import { useLanguage } from "@/hooks/use-language";

export default function PrivacyPage() {
  const { settings, isLoading } = useSettings();
  const { isArabic } = useLanguage();

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="h-8 w-8 animate-spin text-border" />
      </div>
    );
  }

  if (!settings) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <p className="text-foreground/70">Failed to load Privacy Policy</p>
      </div>
    );
  }

  const title = isArabic ? settings.privacyPolicyTitleAr : settings.privacyPolicyTitle;
  const content = isArabic ? settings.privacyPolicyContentAr : settings.privacyPolicyContent;

  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <h1 className="text-3xl font-bold mb-8 text-center">{title}</h1>
      <div 
        className="prose dark:prose-invert max-w-none"
        dangerouslySetInnerHTML={{ __html: content }} 
      />
    </div>
  );
}
