import type { NextPage } from "next";
import { NextSeo } from "next-seo";
import Head from "next/head";
import { useRouter } from "next/router";
import styles from "../../styles/Home.module.css";
import { genericGetRequest } from "apiCalls/apiEndpoints";
import StandardContainer from "@/components/layout/StandardContainer";
import LayoutWithNav from "@/components/layout/LayoutWithNav";
import Image from "next/image";
import Link from "next/link";
import itemNotFoundImage from "assets/images/rastas/logo.png";
import { Breadcrumb } from "antd";
import parse from "html-react-parser";
// This gets called on every request
export async function getServerSideProps({ req, res, params }: any) {
  const { news_slug } = params;

  // Fetch data from external API
  const news_item = await genericGetRequest(`/v1/news/${news_slug}`);

  console.log(news_item);

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

const NewsSlug: NextPage = ({ news_item }: { news_item: any }) => {
  const router = useRouter();
  const { news_slug } = router.query;
  return (
    <div>
      <NextSeo
        title={`${news_slug} | Ashantiweb.com`}
        description={`${news_slug}`}
      />
      <LayoutWithNav>
        <StandardContainer>
          {Object.entries(news_item).length > 0 ? (
            <div className="flex">
              <div className="w-full">
                <Breadcrumb>
                  <Breadcrumb.Item>
                    <Link href={"/"}>Ashantiweb</Link>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item>
                    <Link href={"/news"}>News</Link>
                  </Breadcrumb.Item>
                </Breadcrumb>
                <div className="mt-4"></div>
                <h4 className="text-2xl font-bold">{news_item.title}</h4>
                <p className=" font-normal text-gray-500 mt-2">
                  {news_item.date}
                </p>

                {news_item.picture && (
                  <div className="h-[290px] md:h-[420px] max-h-xl w-[100%] max-w-2xl relative mt-4">
                    <Image
                      layout="fill"
                      src={news_item.picture}
                      alt="lifestyle post image"
                      objectFit="contain"
                    />
                  </div>
                )}

                <div className="mt-6 w-10/12">
                  {parse(news_item.content)}

                  <div className="mt-2">
                    by{" "}
                    <Link
                      href={"/user/" + news_item?.author?.username}
                      passHref
                    >
                      <a className="text-blue-600 hover:text-blue-300">
                        {news_item.author.name}
                      </a>
                    </Link>
                  </div>
                </div>
              </div>

              {/* <div>
             <h5>Explore Other {lifestyle_detail} of Ashanti</h5>
           </div> */}
              {/*  */}
            </div>
          ) : (
            <p>news item not found</p>
          )}
        </StandardContainer>
      </LayoutWithNav>
    </div>
  );
};

export default NewsSlug;