"use client";

// نمایش «بلاگ‌های برتر» فعلاً غیرفعال است (endpoint /api/v1/blogs/top در بک‌اند وجود ندارد).
// markup زیر برای فعال‌سازی بعدی نگه داشته شده؛ تا آن زمان کامپوننت چیزی رندر نمی‌کند.
function Head() {
  return null;
}

/* eslint-disable */
/*
    <div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
      {firstBlog && (
        <Link href={`/blog/${firstBlog.uuid}`} className="w-full lg:w-1/2 cover-head-blogs">
          <CustomLoading width="full" height={400}>
            <img
              src={firstBlog.images?.[0]?.url || "/assets/images/head-blogs-1.png"}
              alt={firstBlog.title || "head blog"}
              className="w-full h-full object-cover"
            />
          </CustomLoading>
          <TextLoading width={150} height={20}>
            <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
              {firstBlog.title}
            </p>
          </TextLoading>
        </Link>
      )}
      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
        <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
          {secondBlog && (
            <Link href={`/blog/${secondBlog.uuid}`} className="w-full cover-head-blogs">
              <CustomLoading width="full" height={180}>
                <img
                  src={secondBlog.images?.[0]?.url || "/assets/images/head-blogs-2.png"}
                  alt={secondBlog.title || "head blog"}
                  className="w-full h-full object-cover"
                />
              </CustomLoading>
              <TextLoading width={150} height={20}>
                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
                  {secondBlog.title}
                </p>
              </TextLoading>
            </Link>
          )}
          {thirdBlog && (
            <Link href={`/blog/${thirdBlog.uuid}`} className="w-full cover-head-blogs">
              <CustomLoading width="full" height={180}>
                <img
                  src={thirdBlog.images?.[0]?.url || "/assets/images/head-blogs-3.png"}
                  alt={thirdBlog.title || "head blog"}
                  className="w-full h-full object-cover"
                />
              </CustomLoading>
              <TextLoading width={150} height={20}>
                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
                  {thirdBlog.title}
                </p>
              </TextLoading>
            </Link>
          )}
        </div>
        {fourthBlog && (
          <Link href={`/blog/${fourthBlog.uuid}`} className="w-full cover-head-blogs">
            <CustomLoading width="full" height={180}>
              <img
                src={fourthBlog.images?.[0]?.url || "/assets/images/head-blogs-4.png"}
                alt={fourthBlog.title || "head blog"}
                className="w-full h-full object-cover"
              />
            </CustomLoading>
            <TextLoading width={150} height={20}>
              <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
                {fourthBlog.title}
              </p>
            </TextLoading>
          </Link>
        )}
      </div>
    </div>
*/

export default Head;