import React from "react";
import Link from "next/link";
import Image from "next/image"

import { ModuleWithInit, AgilityImage } from '@agility/nextjs'
import products from "pages/api/catalog/products";

interface ICustomData {

	posts: []

}

interface IModule {

}

const PostsListing: ModuleWithInit<IModule, ICustomData> = ({ customData, module, languageCode, isDevelopmentMode, isPreview }) => {
	// get posts
	const { posts } = customData;

	// set up href for internal links
	let href = "/pages/[...slug]";

	// if there are no posts, display message on frontend
	if (posts.length <= 0) {
		return (
			<div className="mt-44 px-6 flex flex-col items-center justify-center">
				<h1 className="text-3xl text-center font-bold">No posts available.</h1>
				<div className="my-10">
					<Link href={href} as="/home">
						<a className="px-4 py-3 my-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-300">
							Return Home
						</a>
					</Link>
				</div>
			</div>
		);
	}

	return (
		<div className="relative px-8 mb-12">
			<div className="max-w-screen-xl mx-auto">
				<div className="sm:grid sm:gap-8 sm:grid-cols-2 lg:grid-cols-3">
					{posts.map((post: any, index) => (
						<Link href={post.url} key={index}>
							<a>
								<div className="flex-col group mb-8 md:mb-0">
								<div className="relative h-64">
										<AgilityImage
											src={post.imageSrc}
											alt={post.imageAlt}
											className="object-cover object-center rounded-t-lg"
											layout="fill"

										/>
										<div className="absolute right-0" style={{bottom: "-60px"}}>
											<Image src={post.productImageSrc} alt={post.productName} width={200} height={200} layout="fixed" />
										</div>
									</div>

									<div className="bg-gray-100 p-8 border-2 border-t-0 rounded-b-lg">
										<div className="uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose">
											{post.productName}
										</div>
										<div className="border-b-2 border-primary-500 w-8"></div>
										<div className="mt-4 uppercase text-gray-600 italic font-semibold text-xs">
											{post.date}
										</div>
										<h2 className="text-secondary-500 mt-1 font-black text-2xl group-hover:text-primary-500 transition duration-300">
											{post.title}
										</h2>
									</div>
								</div>
							</a>
						</Link>
					))}
				</div>
			</div>
		</div>
	);
};




export default PostsListing;