import Link from "next/link";
import MainPageHeader from "@/components/headers/MainPageHeader";
import LayoutWithNav from "@/components/layout/LayoutWithNav";
import StandardContainer from "@/components/layout/StandardContainer";
import { genericGetRequest } from "apiCalls/apiEndpoints";
import type { NextPage } from "next";
import { NextSeo } from "next-seo";
import Head from "next/head";
import Image from "next/image";
import styles from "styles/Home.module.css";

// This gets called on every request
export async function getServerSideProps({ req, res, params }: any) {
  // Fetch data from external API
  const news = await genericGetRequest("/v1/news");
  console.log(news.data);
  console.log("news data", news.data.content.data);

  return {
    props: {
      news: news.data,
    },
  };
}

const News: NextPage = ({ news }: any) => {
  console.log("news", news);

  const newsItems = news.content?.data;

  return (
    <LayoutWithNav page_title="News" description="news">
      <NextSeo
        title={`News | Ashantiweb.com`}
        description="Latest Trending News in Ashanti Region"
      />
      <StandardContainer>
        <div className="container">
          <div className="w-full">
            <div className="ml-2">
              <MainPageHeader title="Ashantiweb News" />
            </div>
{/*
            {newsItems.length &&
              newsItems.map((item: any, index: any) => (
                <div key={index} className="w-full md:w-6/12">
                  <Link href={`/news/${item.slug}`}>
                    <div className="w-full rounded-md cursor-pointer">
                      <div className="p-3 flex flex-col">
                        <div className="h-[200px] sm:h-[200px] md:h-[210px] w-full overflow-hidden relative">
                          <Image
                            objectFit="cover"
                            src={item.picture}
                            alt={item.slug}
                            layout="fill"
                          />
                        </div>
                        <div className="flex flex-col justify-between h-56">
                          <div className="flex flex-col justify-start">
                            <p className="text-gray-600 text-sm mt-3 ">
                              {item.date}
                            </p>
                            <p className="text-gray-800 font-semibold text-xl">
                              {item?.title}
                            </p>
                            <p className="text-gray-600 text-base h-28 overflow-hidden mt-2">
                              {item?.description}
                            </p>
                          </div>
                           <div className="mt-2">
                              {item?.author?.name && (
                                <span className="text-gray-900  border-left-2 border-red-500 ">
                                  by{" "}
                                  <Link
                                    href={"/user/" + item?.author?.username}
                                  >
                                    <a className="font-italic text-sm text-gray-900 hover:text-gray-600">
                                      {item?.author?.name}
                                    </a>
                                  </Link>
                                </span>
                              )}
                            </div>
                        </div>
                      </div>
                    </div>
                  </Link>
                </div>
              ))} */}

          
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 sm:gap-4 sm:gap-y-16 mt-6">
              {newsItems.length &&
                newsItems.map((item: any) => (
                  <>
                    <Link href={`/news/${item.slug}`}>
                      <div className="w-full rounded-md cursor-pointer">
                        <div className="p-3 flex flex-col">
                          <div className="h-[200px] sm:h-[200px] md:h-[210px] w-full overflow-hidden relative">
                            <Image
                              objectFit="cover"
                              src={item.picture}
                              alt={item.slug}
                              layout="fill"
                            />
                          </div>

                          <div className="flex flex-col justify-between h-56">
                            <div className="flex flex-col justify-start">
                              <p className="text-gray-600 text-sm mt-3 ">
                                {item.date}
                              </p>
                              <p className="text-gray-800 font-semibold text-xl">
                                {item?.title}
                              </p>
                              <p className="text-gray-600 text-base h-28 overflow-hidden mt-2">
                                {item?.description}
                              </p>
                            </div>
                            {/*  <div className="mt-2">
                              {item?.author?.name && (
                                <span className="text-gray-900  border-left-2 border-red-500 ">
                                  by{" "}
                                  <Link
                                    href={"/user/" + item?.author?.username}
                                  >
                                    <a className="font-italic text-sm text-gray-900 hover:text-gray-600">
                                      {item?.author?.name}
                                    </a>
                                  </Link>
                                </span>
                              )}
                            </div> */}
                          </div>
                        </div>
                      </div>
                    </Link>
                  </>
                ))}
            </div>
          </div>
        </div>
      </StandardContainer>
    </LayoutWithNav>
  );
};

export default News;