import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import {
  FaChartLine,
  FaEye,
  FaRegCommentDots,
  FaCalendarAlt,
} from "react-icons/fa";
import moment from "moment";
import BannerBlock from "./banner";
import imagesPath from "@/lib/imagesPath";
import { useDispatch, useSelector } from "react-redux";
import { getApiMostPopuler } from "@/store/mostPopuler";
import depremImage from "@/public/img/son_depremler.png";
import { CheckUrlSlug } from "@/lib/NewUrlCheck";
import HomePageCard from "./namaz-vakitleri/HomePageCard";

export default function MostPopuler() {
  const [data, setData] = useState();

  const { mostPopuler, mostPopulerStatus } = useSelector(
    (state) => state.mostPopuler
  );

  const dispatch = useDispatch();
  useEffect(() => {
    if (!mostPopulerStatus) {
      dispatch(getApiMostPopuler());
    }
    if (mostPopulerStatus) {
      setData(mostPopuler);
    }
  }, [dispatch]);

  useEffect(() => {
    if (mostPopulerStatus) {
      setData(mostPopuler);
    }
  }, [mostPopulerStatus]);

  return (
    <>
      <div className="p-4 sticky top-3">
        {/* <HomePageCard /> */}
        {/* <Card /> */}
        <Link href={`${process.env.BASE_URL}/son-depremler`}>
          <Image
            src={depremImage}
            className="object-cover my-2 inline-block"
            width={500}
            height={200}
          />
        </Link>

        <BannerBlock area="11" className={`mb-4`} />

        <div className="text-xl font-semibold flex justify-between items-center">
          En Popüler Haberler <FaChartLine />
        </div>

        {data?.length > 0 &&
          data.map((item, key) => (
            <div key={key} className=" mt-4">
              <Link
                title={item.title}
                className="  group hover:bg-gray-50   transition-all items-center  gap-2 flex relative "
                // href={`${process.env.DETAIL_URL}${item.slug}`}
                href={CheckUrlSlug(item.id, item.categorySlug, item.slug)}
              >
                <div className=" lg:max-xl:hidden">
                  <Image
                    src={
                      item.image_thumb !== null
                        ? `${process.env.API_IMAGE_STORAGE}/${item.image_thumb}`
                        : !item.image
                        ? imagesPath.no_image
                        : `${process.env.API_IMAGE_STORAGE}/${item.image}`
                    }
                    className=" object-cover "
                    width={120}
                    height={120}
                    alt={item.title}
                    onError={() => imagesPath.no_image}
                  />
                </div>
                <div className="w-4/5 relative z-10">
                  <div className=" h-10 overflow-hidden text-sm font-semibold">
                    {item.title}
                  </div>
                  <div className="flex gap-2 mt-1">
                    <div className=" flex items-center text-xs font-light gap-1">
                      <FaEye /> {item.read_count}
                    </div>
                    {/* <div className="flex  items-center text-xs font-light gap-1">
                    <FaRegCommentDots /> 17
                  </div> */}
                    <div className="flex  items-center text-xs font-light gap-1 ">
                      <FaCalendarAlt />
                      <span className="overflow-hidden whitespace-nowrap text-ellipsis ">
                        {moment(item.published_at).format("LLL")}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="absolute right-0 bottom-0 font-semibold text-5xl transition-all text-gray-300">
                  {key + 1}
                </div>
              </Link>
            </div>
          ))}

        <BannerBlock area="12" className={`mt-4`} />
      </div>
    </>
  );
}
