import axios from "axios";
import delve from "dlv";

import {environment} from "../../environments/environment";

import SeoConfig from "../../components/seo-config/seo-config";
import Layout from "../../components/layout/layout";
import HomeContent from "../../components/home/home";

import styles from "../blog/index.module.scss";

export async function getServerSideProps(context) {
  const postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC&pagination[limit]=3`;
  const posts = await axios.get(postsUrl);
  return {
    props: {
      posts: delve(posts, 'data.data', []),
    }
  }
}

export function Home({menuHeader, menuFooter, seo, posts}) {
  return (
    <>
      <SeoConfig {...seo} />
      <Layout menuHeader={menuHeader}
              menuFooter={menuFooter}>
        <main className={styles['blog-container'] + " w-full"}>
          <HomeContent posts={posts} />
        </main>
      </Layout>
    </>
  );
}

export default Home;