import VideoPlayer from "@/components/VideoPlayer";
import { fetchCrescentHealthBrochureData } from "@/services/crescent-health.service";
import Image from "next/image";

interface PageData {
    title: string;
    description: string;
}

interface ListItem {
    id: number;
    title: string;
    link_url?: string;
}

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

    try {
        const response = await fetchCrescentHealthBrochureData(
            "5bcd1962-dca6-4f57-abf3-97772ee31796"
        );
        pageData = response?.pagedata ?? null;
        listData = response?.pageItemdataWithSubsection ?? [];
    } catch (error) {
        console.error("Error fetching brochure data:", error);
    }


    // const videoUrlMatch = pageData?.description?.match(/href="([^"]+)"/);
    const videoUrl = "/assets/images/video.mp4"

    return (
        <section className="mx-auto max-w-6xl text-lg leading-relaxed py-2 sm:py-10">

            <h1 className="text-[28px] sm:text-[36px] font-[300] leading-5 text-[#003366] mb-6">
                {pageData?.title}
            </h1>


            <ul className="space-y-3">
                {listData.map((item) => (
                    <li
                        key={item.id}
                        className="flex items-center gap-3 text-[#003366] hover:underline text-[16px] mb-2"
                    >
                        <Image
                            src="/assets/images/bullet.png"
                            alt="bullet"
                            width={18}
                            height={18}
                            className="flex-shrink-0"
                        />
                        {item.link_url ? (
                            <a
                                href={item.link_url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-black"
                            >
                                {item.title}
                            </a>
                        ) : (
                            <span className="text-black">{item.title}</span>
                        )}
                    </li>
                ))}
            </ul>

            {videoUrl && (
                <div className="mt-6">
                    <VideoPlayer
                        url={videoUrl}
                        playing={true}
                        muted={true}
                        loop={true}
                        controls={true}
                    />
                </div>
            )}
        </section>
    );
}