import { fetchCrescentHealthIndustryData } from "@/services/crescent-health.service";
import Image from "next/image";
import React from "react";

interface PageData {
  title: string;
  description: string; // comes as HTML <ul><li>…</li></ul>
}

export default async function Page() {
  let pageData: PageData | null = null;

  try {
    const response = await fetchCrescentHealthIndustryData(
      "de70891c-dc8b-4d17-986c-1afd3729c652"
    );
    pageData = response?.pagedata ?? null;
  } catch (error) {
    console.error("Error fetching industries:", error);
  }

  if (!pageData) {
    return (
      <section className="mx-auto max-w-6xl py-2 sm:py-10 text-center">
        <p className="text-gray-600">No data available.</p>
      </section>
    );
  }


  const industries = pageData.description
    .replace(/<\/?ul>/g, "")
    .split("</li>")
    .map((item) => item.replace(/<li>/g, "").trim())
    .filter((item) => item.length > 0);

  return (
    <section className="mx-auto max-w-6xl py-2 sm:py-10">
      <div className="bg-white text-gray-800">
        <h1 className="mb-8 text-[28px] md:text-[36px] font-[300] text-gray-800">
          {pageData.title}
        </h1>


        <div className="space-y-4">
          {industries.map((industry, index) => (
            <div key={index} className="flex items-center gap-3 mb-2">
              <Image
                src="/assets/images/bullet.png"
                alt="bullet"
                width={20}   
                height={20}  
              />
              <span className="text-gray-900">{industry}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}