import { fetchPageData } from "@/services/api";
import { MaculaPageProps } from "@/types/macula";
import Breadcrumbs from "@/components/CommonComponent/BreadCrumbs";
import CataractTypes from "@/components/CommonComponent/CataractTypes";
import CausesAndRiskFactor from "@/components/CommonComponent/CausesRiskFactor";
import RequestCostResources from "@/components/CommonComponent/CostResources";
import MonitoringAndPrevention from "@/components/CommonComponent/MonitoringAndPrevention";
import OurTreatment from "@/components/CommonComponent/OurTreatment";
import RecoveryAftercare from "@/components/CommonComponent/RecoveryAftercare";
import ServicesBanner from "@/components/CommonComponent/ServicesBanner";
import SymptomsForCataract from "@/components/CommonComponent/SymptomsForCataract";
import VideoSection from "@/components/CommonComponent/servicesVideos";
import TreatmentJourney from "@/components/CommonComponent/TreatmentJourney";
import ImplantsTechinques from "@/components/CommonComponent/ImplantsTechinques";
import SafetyRisks from "@/components/CommonComponent/SafetyRisks";
import OurSpecialist from "@/components/CommonComponent/OurSpecialist";
import OphthalmologyTestimonials from "@/components/ReviewsAndTestimonials/OphtalmologyTestimonials";
import Faqs from "@/components/CommonComponent/Faqs";
import LiveBooking from "@/components/CommonComponent/LiveBooking";
import { Metadata } from "next";
import { createSeo } from "@/seo/MetaSeo";

export async function generateMetadata(): Promise<Metadata> {
    return createSeo("pages/macula", "/ophthalmology/macula");
}

export default async function MaculaPage() {
    const maculapagedata = await fetchPageData<MaculaPageProps>("pages/macula");

    return (
        <>
            <Breadcrumbs items={maculapagedata.data.breadcrumbs} />
            <ServicesBanner
                maxWidthClasses="md:max-w-[650px]"
                maxWidthDescriptionClasses="md:max-w-[550px] xl:max-w-[600px]"
                className="mb-16 md:mb-30"
                {...maculapagedata.data.about_banner}
            />
            <CausesAndRiskFactor
                {...maculapagedata.data.causes_risk_factors}
            />
            <CataractTypes {...maculapagedata.data.what_we_offer} />
            <SymptomsForCataract {...maculapagedata.data.symptoms_and_indications} />
            <OurSpecialist {...maculapagedata.data.homepage_meet_team} />
            <VideoSection {...maculapagedata.data.treatment} />
            <OurTreatment columns={6} {...maculapagedata.data.treatment_we_offer} />
            <ImplantsTechinques
                className="mb-16 md:mb-30" columns={2}
                {...maculapagedata.data.homepage_card_content__left_heading}
            />
            <TreatmentJourney
                className="mb-16 md:mb-30 xl:mb-40" showCTA={false}
                {...maculapagedata.data.surgery_steps}
            />
            <RecoveryAftercare {...maculapagedata.data.recovery_steps} />
            <SafetyRisks
                className="mb-16 md:mb-24 xl:mb-30" columns={2}
                {...maculapagedata.data.safety_and_risks}
            />
            <section className="mb-16 md:mb-30 xl:mb-40">
                <div className="container">
                    <OphthalmologyTestimonials />
                </div>
            </section>
            <MonitoringAndPrevention {...maculapagedata.data.monitor_and_prevention} />
            <RequestCostResources {...maculapagedata.data.clinicpage_left_content_button_with_right_image_with_points} />
            <Faqs {...maculapagedata.data.homepage_faqs} />
            <LiveBooking {...maculapagedata.data.live_booking} />
        </>
    );
}