"use client";

import { useState } from "react";
import { NewsItem } from "@/interface/post";
import fetcher from "@/utils/fetcher";
import Image from "next/image";
import Link from "next/link";
import useSWR from "swr";

const LatestNewsVertical = ({
  end_point = "/latest-post",
}: {
  end_point?: string;
}) => {
  const {
    data,
    error,
    isLoading,
  }: { data: any; error: any; isLoading: boolean } = useSWR(end_point, fetcher);


  const [page, setPage] = useState(0); // Track the current page index

  if (error) return <div>Error loading data</div>;
  if (isLoading) return <div>Loading...</div>;

  const itemsPerPage = 5;
  const totalPages = Math.ceil(data?.length / itemsPerPage);
  const startIndex = page * itemsPerPage;
  const visiblePosts = data?.slice(startIndex, startIndex + itemsPerPage);

  // console.log(visiblePosts,"latest")
  const handleNextPage = () => {
    setPage((prev) => (prev + 1) % totalPages); // Loop back to the start
  };
  const convertTimeStampToDate = (time_stamp:any)=>{
    const date = new Date(time_stamp*1000)
    const formattedDate = date.toLocaleDateString("en-US",
     {
       month :"short",
       day :"2-digit",
       year:"numeric"
     }
    )
    return <div>{formattedDate}</div>
  }
  return (
    <div className="flex flex-col">
      {visiblePosts?.slice(0, 5).map((item: NewsItem) => {
        const {
          default_img,
          category_name,
          category,
          image_title,
          image_alt,
          news_id,
          post_by_image,
          post_by_name,
          post_by_id,
          post_date,
          post_title,
          encode_titl,
          stitle,
          video,
          image_check,
          image_thumb,
          image_large,
          time_stamp
        } = item;

        return (
          <Link
            key={news_id}
            className="group mb-0 py-[14px] relative 
             after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1px] 
             after:bg-[#D6D6D6] last-of-type:after:hidden dark:after:bg-[var(--border-dark)] 
             last:after:hidden"

            href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
          >
            <div className="ml-0 md:ml-0 lg:ml-2 mb-2 overflow-hidden rounded-[5px] float-left md:float-left lg:float-right xl:float-right relative">
              <Image
                alt={image_alt || "image_alt"}
                width={330}
                height={186}
                decoding="async"
                className="w-[124px] h-auto lg:w-[110px] lg:h-[75px] object-cover group-hover:scale-105 duration-700 ease-out"
                src={image_thumb}
                loading="lazy"
              />
            </div>
            <h3 className="text-sm px-[16px] lg:px-0 xl:px-0 dark:text-white line-clamp-2 text-[#808080]">{convertTimeStampToDate(time_stamp)}</h3>
            <h3 className="text-sm px-[16px] lg:px-0 xl:px-0 text-[var(--dark)] dark:text-white md:leading-[1.62rem] line-clamp-2">
              {post_title}
            </h3>
          </Link>
        );
      })}

      {/* View More Button */}
      {data?.length > itemsPerPage && (
       <div className="flex py-5 justify-start items-center">
                   <Link
                    href="/latest-news">
                    <button 
                   
                    className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300 cursor-pointer">
                     View More <span className="text-lg">»</span> </button>
                     </Link>
                  </div>
      )}
    </div>
  );
};

export default LatestNewsVertical;