import LayoutWithNav from "@/components/layout/LayoutWithNav";
import { fetchDistricts, genericGetRequest } from "apiCalls/apiEndpoints";
import RequireAuth from "auth/RequireAuth";
import { useDistricts } from "context/DistrictContext";
import type { NextPage } from "next";
import { NextSeo } from "next-seo";
import { useRouter } from "next/router";
import { useEffect } from "react";
import styles from "../../styles/Home.module.css";
import StandardContainer from "@/components/layout/StandardContainer";
import Link from "next/link";
import MainPageHeader from "@/components/headers/MainPageHeader";

const Shops: NextPage = ({ data, shops }: any) => {
  const { setDistricts } = useDistricts();

  useEffect(() => {
    setDistricts(data?.districts);
    console.log(data?.districts);
  }, [data?.districts, setDistricts]);

  return (
    <LayoutWithNav page_title="shops" description="shops">
      <NextSeo title={`Shops | Ashantiweb.com`} description="Shops" />
      <StandardContainer>
        <MainPageHeader title="Ashantiweb Shops" />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
          {shops.data.length > 0 ? (
            <div></div>
            // shops.data.map((item: any) => <Link href="/">{item.name}</Link>)
          ) : (
            <div>
              <h4>No shops found</h4>
            </div>
          )}
        </div>
      </StandardContainer>
    </LayoutWithNav>
  );
};

export async function getServerSideProps({ res, req }: any) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );

  const districts = await fetchDistricts();
  const shops = await genericGetRequest("v1/shops");

  return {
    props: {
      data: { districts: districts.data },
      shops: shops.data,
    }, // will be passed to the page component as props
  };
}

export default Shops;