import type { NextPage } from 'next';
import dynamic from 'next/dynamic';

import StrapiSeo from '@/components/common/seo/StrapiSeo';
import { fetchSingleTypePageData } from '@/helpers/utilities/fetchAPI';
const CustomUIUXDesign = dynamic(() => import('@/components/serviceDetails/customUIUXDesign/CustomUIUXDesign'));
const POPULATE = [
    'seo.ogImage',
    'seo.multiStructureData',
    'developmentService.service.logo',
    'portfolio.image',
    'portfolio.logo',
    'services.image',
    'services.techStack.logo',
    'techStack.image',
    'keyDeliverables.image',
    'keyDeliverables.techStack.logo',
    'processData',
    'hero.bottomImages',
    'hero.buttonIcon',
    'advanceService.service.logo',
    'efficiency.servicesCard.icon',
    'brandLogos.brands.logo',
    'portfolio.image',
    'designProcess.service.logo',
    'industry.tabs.icon,',
    'industry.tabs.bigImage',
    'faq.FAQ.icon',
    'whyChoose.service.logo',
    'business.serviceList.image',
    'techStack.techStack.logo',
    'clients.brandLogos.brands.logo',
];
export async function getStaticProps() {
    return await fetchSingleTypePageData(POPULATE, 'ui-ux-page');
}

const CustomUIAndUXDesignPage: NextPage = ({ data }: any) => {
    return (
        <>
            <StrapiSeo content={data.data?.attributes?.seo} />
            <CustomUIUXDesign data={data.data?.attributes} />
        </>
    );
};

export default CustomUIAndUXDesignPage;