import TextLoading from "@/app/component/loading/Text";

function Head({ data, loading }) {
  return (
    <div>
      <TextLoading width={200} height={18} loading={loading}>
        <div className="flex items-center justify-start gap-1">
          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
            بلاگ {">"}
          </p>
          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
            پوست و مو {">"}
          </p>
          <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
            روش های خانگی محافظت از پوست در تابستان
          </p>
        </div>
      </TextLoading>
      <div
        className={
          loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
        }
      >
        <TextLoading width={250} height={22} loading={loading}>
          <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
            روش های خانگی محافظت از پوست در تابستان
          </p>
        </TextLoading>
      </div>
      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
        <div className="flex items-center justify-start gap-1">
          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
            تاریخ انتشار:
          </p>
          <TextLoading width={55} height={22} loading={loading}>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {data.date_of_release}
            </p>
          </TextLoading>
        </div>
        <div className="flex items-center justify-start gap-1">
          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
            زمان مطالعه:
          </p>
          <TextLoading width={55} height={22} loading={loading}>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {data.time}
            </p>
          </TextLoading>
        </div>
      </div>
    </div>
  );
}

export default Head;