import Image from "next/image";
import Link from "next/link";
import moment from "moment";
import { useEffect, useState } from "react";
import imagesPath from "@/lib/imagesPath";
import { CheckUrlSlug } from "@/lib/NewUrlCheck";

export default function Card({ item, categorySlug }) {


  const [date, SetDate] = useState("");
  const [src, setSrc] = useState("")

  useEffect(() => {
    SetDate(moment(item.published_at).format("LLL"));
  }, []);
  return (
    <div className=" relative bg-white  hover:shadow-xl transition-all shadow-md rounded ">
      <Link title={item.title} href={CheckUrlSlug(item.id, categorySlug, item.slug)}>
        <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=" w-full my-2 object-cover  h-[150px]"
          width={200}
          height={150}
          alt={item.title}
          onError={() => setSrc("./public/img/no_image.png")}
        />

        <strong className="px-3 flex text-sm h-10 overflow-hidden hover:text-blue-700">
          {item.title}
        </strong>
      </Link>
      <div className="flex gap-2 mt-1 px-3 my-2">
        <div className=" flex items-center  text-xs font-light gap-2">
          <Link
            title={item.authorName}
            href={`${process.env.DETAIL_URL}author/${item.authorSlug}`}
            className="hover:text-blue-700"
          >
            {item.authorName}
          </Link>
        </div>

        <div className="flex  items-center text-xs font-light gap-2">
          / {date}
        </div>
      </div>
      <p className="px-3 text-sm h-20 overflow-hidden mb-3 ">{item.spot}</p>
    </div>
  );
}
