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

export default Head;
