import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
import { convertTimestampToJalali, imageUrl } from "@/helper";

function Article({ data }) {
  const imageSrc = data.images?.[0]?.url
    ? imageUrl(data.images[0].url, "/assets/images/cover-blog-1.png")
    : "/assets/images/cover-blog-1.png";
  const createdDate = data.created ? convertTimestampToJalali(data.created) : "";

  return (
    <li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
      <CustomLoading width="full" height={200}>
        <Link href={`/blog/${data.uuid}`}>
          <Image
            className="w-full h-[217px] object-cover"
            alt={data.title || "article-img"}
            src={imageSrc}
            height={217}
            width={392}
          />
        </Link>
      </CustomLoading>
      <div className="p-[12px] md:p-[14px] lg:p-[16px]">
        <TextLoading width={150} height={18}>
          <Link href={`/blog/${data.uuid}`}>
            <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold line-clamp-2">
              {data.title}
            </h1>
          </Link>
        </TextLoading>
        <div className="flex items-center justify-start gap-[16px]">
          <TextLoading width={100} height={18}>
            <p className="text-[#9B9B9B] text-[14px] font-medium">
              {data.author && `نویسنده: ${data.author}`}
            </p>
          </TextLoading>
          {createdDate && (
            <TextLoading width={110} height={18}>
              <p className="text-[#9B9B9B] text-[14px] font-medium">
                {createdDate}
              </p>
            </TextLoading>
          )}
        </div>
      </div>
    </li>
  );
}

export default Article;