"use client";
import { useState, useEffect } from "react";
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Link from "next/link";
import { request } from "@/services/response";

function Head() {
  const [topBlogs, setTopBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchTopBlogs = async () => {
      try {
        setIsLoading(true);
        const response = await request.getTopBlogs();
        setTopBlogs(response || []);
      } catch (error) {
        console.error("Error fetching top blogs:", error);
        setTopBlogs([]);
      } finally {
        setIsLoading(false);
      }
    };

    fetchTopBlogs();
  }, []);

  if (isLoading || topBlogs.length === 0) {
    return null;
  }

  const [firstBlog, secondBlog, thirdBlog, fourthBlog] = topBlogs;

  return (
    <>{/*
    <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;