// components/footerLinks/CommunityGuidelines.tsx
"use client";

import React from "react";
import { WebsiteFooter } from "@/components/website/WebsiteFooter";
import { WebsiteHeader } from "../website/WebsiteHeader";

interface CommunityGuidelinesProps {
  communityGuidelinesPageData: {
    communityGuideLinesPage?: {
      pageTitle?: string;
      shortContent?: string;
    };
    headerFooterImage?: any;
    socialLinks?: any[];
  } | null;
}

const CommunityGuidelines = ({ communityGuidelinesPageData }: CommunityGuidelinesProps) => {
  if (!communityGuidelinesPageData?.communityGuideLinesPage) {
    return (
      <div className="min-h-screen w-full flex items-center justify-center">
        <p className="text-muted-foreground">Loading...</p>
      </div>
    );
  }

  const { pageTitle, shortContent } = communityGuidelinesPageData.communityGuideLinesPage;

  return (
    <div className="min-h-screen w-full flex flex-col">
              <WebsiteHeader headerData={communityGuidelinesPageData?.headerFooterImage} />

      {/* Main Content */}
      <div className="flex-1 w-full py-10 px-5 md:px-0 md:max-w-5xl mx-auto text-black dark:invert">
        <h1 className="text-3xl font-bold mt-5 ">{pageTitle}</h1>
        <div className="w-full h-px bg-border my-4"></div>

        {shortContent && (
          <div
            className="prose max-w-full
                       list-disc list-outside 
                       [&>ul]:list-disc [&>ul]:pl-6
                       [&>ol]:list-decimal [&>ol]:pl-6
                       prose-p:text-muted-foreground prose-li:text-muted-foreground
                       prose-headings:text-foreground prose-strong:text-foreground
                       leading-relaxed"
            dangerouslySetInnerHTML={{ __html: shortContent }}
          />
        )}
      </div>

      {/* Footer */}
      <WebsiteFooter
        footerData={communityGuidelinesPageData?.headerFooterImage}
        socialLinks={communityGuidelinesPageData?.socialLinks}
      />
    </div>
  );
};

export default CommunityGuidelines;