import React from 'react';
import Header from "@/components/Company/Header";
import Footer from "@/components/Company/Footer";
import PageBanner from '@/components/Common/PageBanner';
import AboutUS from '@/components/Company/AboutUs/AboutUs';


import Cookies from "cookies";
import Gallery from "@/components/Common/new/Gallery";
import Company from "@/api/new/company";

const About = function ({ companyName,sosmed,background,gallery,info,company,icon,user, ...props }) {
    return (
        <>
            <Header company={companyName} icon={icon} username={user} />
            <PageBanner pageTitle="Kenali Kami" />
            <Gallery title={companyName+" Thamrin Group"} galleries={gallery}></Gallery>
            <AboutUS info={info} company={company} img={icon}/>
            <Footer company={company} social={sosmed} icon={icon} desc={info}/>
        </>
    )
}

export default About;

export async function getServerSideProps(context) {
    var props = {};
    var companyName = process.env.NEXT_PUBLIC_COMPANY;
    var res = await Company.companyByName(companyName);

    if (res["STATUS"] === 1 && res["DATA"]["companies"].data) {
        props["icon"] = res["DATA"]["companies"].data[0].attributes.Icon.data.attributes.url;
        props["company"] =res["DATA"]["companies"].data[0].attributes;
        props["info"] =res["DATA"]["companies"].data[0].attributes.Description;
        props["gallery"] = (res["DATA"]["companies"].data[0].attributes.Gallery.data)?res["DATA"]["companies"].data[0].attributes.Gallery.data.map((data,idx)=>data.attributes.url):[];
        props["background"] = res["DATA"]["companies"].data[0].attributes.Background.data.attributes.url;
        props["sosmed"] = res["DATA"]["companies"].data[0].attributes.Social_Medias.data;
    }  
    props["companyName"] = companyName;
    return {
        props
    };
}