import CircularLoading from "@/app/component/loading/Circular";
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Link from "next/link";
import { blogCover, convertTimestampToJalali } from "@/helper";

function Item({ data, idx, loading }) {
  const cover = blogCover(data);
  const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";

  return (
    <li className="flex w-full relative items-start justify-start gap-[8px] py-[12px]">
      {/* CustomLoading ظرف نمی‌سازد، پس فرزند مستقیمِ فلکس همین لینک است؛
          بدون shrink-0 تیتر بلند عرض عکس را می‌بلعد و ارتفاعش ثابت می‌ماند. */}
      <CustomLoading width={80} height={72} loading={loading}>
        <Link href={`/blog/${data.uuid}`} className="block shrink-0">
          <img
            className=" w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] rounded-[8px] overflow-hidden object-cover "
            src={cover}
            alt={data.title || "article"}
          />
        </Link>
      </CustomLoading>
      <div className="flex min-w-0 flex-col gap-[6px] items-start justify-start">
        <TextLoading width={150} height={18} loading={loading}>
          <Link href={`/blog/${data.uuid}`}>
            {/* h3 چون h2 با تیترهای خودِ متن مقاله (.blog-content h2) هم‌رده می‌شد. */}
            <h3 className="text-[#3B3B3B] text-[14px] md:text-[15px] font-bold leading-[1.8] line-clamp-2">
              {data.title}
            </h3>
          </Link>
        </TextLoading>
        <TextLoading width={110} height={18} loading={loading}>
          <p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
            {createdDate && `تاریخ انتشار: ${createdDate}`}
          </p>
        </TextLoading>
      </div>
      {idx > 0 && (
        <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
      )}
    </li>
  );
}

export default Item;