import Link from "next/link";
import { convertTimestampToJalali } from "@/helper";

function Head({ data }) {
  const firstTag = data?.tag?.[0];
  const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";

  return (
    <div>
      <div className="flex items-center justify-start gap-1">
        <Link
          href="/blogs"
          className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal hover:text-[#525252]"
        >
          بلاگ
        </Link>
        <span className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
          {">"}
        </span>
        {firstTag && (
          <>
            <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
              {firstTag.name} {">"}
            </p>
          </>
        )}
        <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
          {data?.title}
        </p>
      </div>
      <div>
        <h1 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">
          {data?.title}
        </h1>
      </div>
      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
        {data?.author && (
          <div className="flex items-center justify-start gap-1">
            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
              نویسنده:
            </p>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {data.author}
            </p>
          </div>
        )}
        {createdDate && (
          <div className="flex items-center justify-start gap-1">
            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
              تاریخ انتشار:
            </p>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {createdDate}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

export default Head;