import { fetchProfileData } from "@/services/about-us.service";
import React from "react";

export default async function page() {
  let profileData: {
    cover_image_url?: string;
    title?: string;
    description?: string;
  } | null = null;

  try {
    const response = await fetchProfileData(
      "9c428cc9-e9a8-4591-9223-ff85cb6afcb4"
    );
    profileData = response?.pagedata || null;
  } catch (error) {
    console.log("Error fetching profile data:", error);
    return null;
  }
  if (!profileData) return null;

  return (
    <div>
      {/* Content */}
      <div className="container mx-auto sm:px-4 py-8">
        <div className="w-full text-left">
          <h1 className="text-center text-[48px] font-[300] mb-6">
            {profileData.title || 'Profile'}
          </h1>
          {profileData.description ? (
            <div
              className="mx-auto max-w-4xl text-justify text-[17px] leading-6 sm:leading-relaxed text-gray-700"
              dangerouslySetInnerHTML={{ __html: profileData.description }}
            />
          ) : (
            <p className="text-gray-500 text-center">No description available.</p>
          )}
        </div>
      </div>
    </div>
  )
}