import Banner from "@/components/Banner";
import SwiperCardSection from "@/components/layout/SwiperCardSection";
import RowAccordion from "@/components/layout/RowAccordion";
import HonorGrids from "@/components/layout/HonorGrids";
import ParagraphSection from "@/components/layout/ParagraphSection";
import { useStore } from "@/store";

export default function PropertyService() {
    const appConfig = useStore((s) => s.appConfig);
    const data = appConfig?.business?.propertyService;

    if (!data) return null;

    const banner = data.banner;
    const section1Data = data.section1Data;
    const section2Data = data.section2Data;
    const section3Data = data.section3Data;
    const section4Data = data.section4Data;

    const swiperCardData = section2Data

    const rowAccordionData = section3Data
        ? {
              title: section3Data.title,
              items: section3Data.items?.map((i: { title: string; backgroundImage?: string }) => ({
                  title: i.title,
                  backgroundImage: i.backgroundImage,
              })) ?? [],
          }
        : null;

    return (
        <div>
            <Banner
                title={banner?.title ?? ""}
                desc={banner?.content}
                titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            {section1Data && <ParagraphSection data={section1Data} />}
            {swiperCardData && <SwiperCardSection data={swiperCardData} />}
            {rowAccordionData && <RowAccordion data={rowAccordionData} />}
            {section4Data && <HonorGrids data={section4Data} />}
        </div>
    );
}