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 Index({menuHeader, menuFooter, posts, seo}) {
  return (
    <>
      <SeoConfig {...seo} />
      <Layout menuHeader={menuHeader}
              menuFooter={menuFooter}>
        <main className={styles['blog-container'] + " w-full"}>
          <HomeContent posts={posts} />
        </main>
      </Layout>
    </>
  );
}

export default Index;