"use client";
import Image from "next/image";
import { LinkButton } from "../form/forms";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import Link from "next/link";
import { AWS_CDN_URL } from "@/utils/staticValues";

type OtherStoriesProps = {
  stories: any[];
};

const limit = 10;

export default function OtherStories({stories }: OtherStoriesProps) {
 
  return (
    <div className="flex flex-col gap-4 py-16">
      <div>
        <Swiper
          loop={true}
          spaceBetween={4}
          slidesPerView={2}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          pagination={{
            clickable: true,
          }}
          navigation={true}
          modules={[Autoplay, Pagination, Navigation]}
          className="product-img-swiper"
          breakpoints={{
            640: {
              slidesPerView: 2,
            },
            768: {
              spaceBetween: 40,
              slidesPerView: 3.5,
            },
          }}
        >
          {stories.map((story, index) => (
            <SwiperSlide key={`${story.id}_${index}`} className="mb-8 flex flex-col">
              <Link
                href={`/stories/${story.slug}`}
                className="relative top-4 mb-8 grid grid-cols-1 border-spacing-8 flex-col border-1 border-dashed p-4 pb-0 transition-all duration-200 hover:top-1 md:border-2"
              >
                <span className="bg-hair absolute -top-1.25 left-[26%] flex h-2 w-4 scale-75"></span>
                <span className="bg-hair absolute right-[10%] -bottom-1.25 flex h-2 w-4 scale-75"></span>
                <span className="bg-hair absolute top-[75%] -left-1.25 flex h-8 w-2 scale-75"></span>
                <span className="bg-hair absolute top-[25%] -right-1.25 flex h-6 w-2 scale-75"></span>
                <div className="flex w-full items-center justify-center text-center h-16 md:h-22 overflow-hidden">
                  <h4 className="capitalize line-clamp-3 leading-6">{story.title}</h4>
                </div>
                <div className="mx-auto relative -bottom-1 flex items-end justify-center align-bottom w-full overflow-hidden">
                  <div className="w-9/10 aspect-[4/5]">
                    <Image
                     src={`${AWS_CDN_URL}/${story.thumbnail}`}
                    alt={story.title}
                    width={800}
                    height={1000}
                    className="object-cover h-full w-full aspect-[4/5]"
                  />
                  </div>
                </div>
              </Link>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className="flex flex-col items-center justify-center align-middle">
        <div className="flex w-full md:w-1/4">
          <LinkButton
            id="link_home_get_started_web"
            label="View more stories"
            href="/stories"
            color="gray"
            hairline="teal"
          />
        </div>
      </div>
    </div>
  );
}