import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";

function Head({ loading }) {
  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]">
      <Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
        <CustomLoading loading={loading} width="full" height={400}>
          <Image
            src="/assets/images/head-blogs-1.png"
            width={600}
            height={424}
            alt="head blog"
          />
        </CustomLoading>
        <div
          className={
            loading
              ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
              : ""
          }
        >
          <TextLoading width={150} height={20} loading={loading}>
            <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
              روش های خانگی محافظت از پوست در تابستان
            </p>
          </TextLoading>
        </div>
      </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]">
          <Link href="#" className="w-full cover-head-blogs">
            <CustomLoading loading={loading} width="full" height={180}>
              <Image
                src="/assets/images/head-blogs-2.png"
                width={600}
                height={424}
                alt="head blog"
              />
            </CustomLoading>
            <div
              className={
                loading
                  ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
                  : ""
              }
            >
              <TextLoading width={150} height={20} loading={loading}>
                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
                  فواید نوشیدن آب برای سلامتی
                </p>
              </TextLoading>
            </div>
          </Link>
          <Link href="#" className="w-full cover-head-blogs">
            <CustomLoading loading={loading} width="full" height={180}>
              <Image
                src="/assets/images/head-blogs-3.png"
                width={600}
                height={424}
                alt="head blog"
              />
            </CustomLoading>
            <div
              className={
                loading
                  ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
                  : ""
              }
            >
              <TextLoading width={150} height={20} loading={loading}>
                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
                  راهکارهای ساده برای درمان سر درد
                </p>
              </TextLoading>
            </div>
          </Link>
        </div>
        <Link href="#" className="w-full cover-head-blogs">
          <CustomLoading loading={loading} width="full" height={180}>
            <Image
              src="/assets/images/head-blogs-4.png"
              width={600}
              height={424}
              alt="head blog"
            />
          </CustomLoading>
          <div
            className={
              loading
                ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
                : ""
            }
          >
            <TextLoading width={150} height={20} loading={loading}>
              <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
                تغذیه مناسب برای کاهش فشار خون
              </p>
            </TextLoading>
          </div>
        </Link>
      </div>
    </div>
  );
}

export default Head;