import { fetchPageData } from "@/services/api";
import { AestheticCarePageProps } from "@/types/aesthetic-care";
import Breadcrumbs from "@/components/CommonComponent/BreadCrumbs";
import WhyChooseOculusSurgery from "@/components/Aesthetic/AestheticSurgery/WhyChooseOculus";
import ServicesBanner from "@/components/CommonComponent/ServicesBanner";
import OurSpecialist from "@/components/CommonComponent/OurSpecialist";
import TreatmentJourney from "@/components/CommonComponent/TreatmentJourney";
import AestheticsTestimonials from "@/components/ReviewsAndTestimonials/AestheticsTestimonials";
import RequestCostResources from "@/components/CommonComponent/CostResources";
import Faqs from "@/components/CommonComponent/Faqs";
import LiveBooking from "@/components/CommonComponent/LiveBooking";
import CataractTypes from "@/components/CommonComponent/CataractTypes";
import Safety from "@/components/Aesthetic/AestheticMedicine/Safety";
import { Metadata } from "next";
import { createSeo } from "@/seo/MetaSeo";
import WhatWeOfferAesthetic from "@/components/Aesthetic/AestheticSurgery/WhatWeOffer";

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

export default async function AestheticCarePage() {
    const aestheticCarePageData = await fetchPageData<AestheticCarePageProps>("pages/aesthetic-care");


    return (
        <>
            <Breadcrumbs items={aestheticCarePageData.data.breadcrumbs} />
            <ServicesBanner
                className="mb-16 md:mb-30"
                maxWidthClasses="md:max-w-[600px]"
                maxWidthDescriptionClasses="md:max-w-[550px] xl:max-w-[630px]"
                {...aestheticCarePageData.data.about_banner}
            />
            <WhatWeOfferAesthetic columns={3}  {...aestheticCarePageData.data.clinicpage_specialist_details} />
            <WhyChooseOculusSurgery showDotsButton={false} {...aestheticCarePageData.data.homepage_left_content_with_right_image} />
            <CataractTypes {...aestheticCarePageData.data.what_we_offer} />
            <TreatmentJourney
                showCTA={true} className="mb-16 md:mb-24 xl:mb-30"
                {...aestheticCarePageData.data.surgery_steps}
            />
            <Safety {...aestheticCarePageData.data.causes_risk_factors} />
            <section className="mb-16 md:mb-20 xl:mb-30">
                <div className="container">
                    <AestheticsTestimonials />
                </div>
            </section>
            <OurSpecialist {...aestheticCarePageData.data.homepage_meet_team} />
            <RequestCostResources {...aestheticCarePageData.data.clinicpage_left_content_button_with_right_image_with_points} />
            <Faqs {...aestheticCarePageData.data.homepage_faqs} />
            <LiveBooking {...aestheticCarePageData.data.live_booking} />
        </>
    )
}