// components/terms-and-conditions/TermsAndConditions.tsx
"use client";

import React from "react";
import { WebsiteFooter } from '@/components/website/WebsiteFooter';
import { WebsiteHeader } from '@/components/website/WebsiteHeader';

import { cn } from "@/lib/utils";

interface TermsAndConditionsProps {
  termsAndConditionsPageData: {
    termsAndConditionsData?: {
      pageTitle?: string;
      pageSubTitle?: string;
      shortContent?: string;
      fullContent?: string;
      seoTitle?: string;
      mainImage?: string;
      slug?: string;
    };
    headerFooterImage?: any;
    socialLinks?: any[];
  } | null;
}

const TermsAndConditions = ({ termsAndConditionsPageData }: TermsAndConditionsProps) => {
  if (!termsAndConditionsPageData?.termsAndConditionsData) {
    return (
      <div className="min-h-screen w-full flex items-center justify-center">
        <p className="text-muted-foreground">Loading...</p>
      </div>
    );
  }

  const { pageTitle, pageSubTitle, shortContent, fullContent } =
    termsAndConditionsPageData.termsAndConditionsData;

  return (
    <div className="min-h-screen w-full">
      {/* Header */}
      <WebsiteHeader
        headerData={termsAndConditionsPageData?.headerFooterImage}
      />

      {/* Main Content */}
      <div className="w-full py-10 px-5 md:px-0 md:max-w-5xl mx-auto text-black dark:invert">
        {/* Title */}
        <div className="mb-4">
          <h1 className="text-4xl font-extrabold">
            {pageTitle}
          </h1>
        </div>

        {/* Divider */}
        <div className="w-full h-px bg-border mb-4"></div>

        {/* Short Content */}
        {shortContent && (
          <section className="mb-2">
            <div
              className={cn(
                "prose max-w-none",
                "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 }}
            />
          </section>
        )}

        {/* Full Content */}
        {fullContent && (
          <section>
            <div
              className={cn(
                  "prose max-w-none",
    "[&_a]:text-[#0084A5]",
    "dark:[&_a]:invert",
    "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: fullContent }}
            />
          </section>
        )}
      </div>

      {/* Footer */}
      <WebsiteFooter
        footerData={termsAndConditionsPageData?.headerFooterImage}
        socialLinks={termsAndConditionsPageData?.socialLinks}
      />
    </div>
  );
};

export default TermsAndConditions;