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

import SeoConfig from "../../components/seo-config/seo-config";
import Layout from "../../components/layout/layout";
import Categories from "../../components/categories/categories";

import styles from "./index.module.scss";
import BlogSearch from "../../components/blog-search/blog-search";
import {environment} from "../../environments/environment";
import CardBlog from "../../components/card-blog/card-blog";

export async function getServerSideProps(context) {
  const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`)
  const posts = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`)
  return {
    props: {
      categories: delve(categories, 'data.data', []),
      lastPublished: delve(posts, 'data.data', []),
    }
  }
}

export function Blog({menuHeader, menuFooter, seo, categories, lastPublished}) {
  return (
    <>
      <SeoConfig {...seo}/>
      <Layout menuHeader={menuHeader} menuFooter={menuFooter} headerTransparent={true}>
        <main className={styles['blog-container'] + " w-full lg:my-10"}>
          <section className="container max-w-screen-xl mx-auto relative flex">
            <section className="grow lg:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
              {lastPublished.map((post, index: number) => (
                <CardBlog key={'card-blog-' + post.id + index} item={post}/>))
              }
            </section>
            <aside className="grow lg:basis-2/6">
              <BlogSearch/>
              <Categories items={categories}/>
            </aside>
          </section>
        </main>
      </Layout>
    </>
  );
}

export default Blog;