import AboutUs from "@/components/about-us/about-us";
import React from "react";
import Head from "next/head";
import { customerApi } from "@/api/api";
import FadeInContainer from "@/components/utils/animation/fadeInContainer";

const About = ({ siteText, metaData }) => {
  return (
    <React.Fragment>
      <Head>
        <title>
          {metaData.meta_title
            ? metaData.meta_title
            : "Our Story - " + process.env.NEXT_PUBLIC_COMPANY_NAME}
        </title>
        <meta charset="UTF-8" />
        <meta name="description" content={metaData.meta_description} />
        <meta
          name="keywords"
          content={
            metaData.meta_keywords && metaData.meta_keywords.length > 0
              ? metaData.meta_keywords.join(",")
              : ""
          }
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <FadeInContainer loadVisibile={true}>
        <AboutUs siteText={siteText.our_story_section} />
      </FadeInContainer>
    </React.Fragment>
  );
};

export default About;

export const getStaticProps = async (ctx) => {
  let siteText = {};
  let metaData = {};
  await Promise.all([
    customerApi.get("/site/contents?group_code=our_story_section"),
    customerApi.get("/site/meta?path=/our-story"),
  ]).then((res) => {
    let newArray = { ...res[0].data.result };
    siteText = newArray;
    metaData = res[1].data.data;
  });
  return {
    props: {
      siteText: siteText,
      metaData: metaData,
    },
    revalidate: 600,
  };
};
