// titleTag: صفحاتی که h1 خودشان را جای دیگری دارند «p» می‌فرستند تا صفحه دو h1 نگیرد.
// کلاس‌ها مستقل از تگ‌اند، پس ظاهر در هر دو حالت یکسان است.
function HeadPageList({ children, title, detail, titleTag: TitleTag = "h1" }) {
  return (
    <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
      <div
        className=" padding-responsive flex flex-col items-center gap-[25px] pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)] pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px] "
      >
        <TitleTag className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">
          {title}
        </TitleTag>
        <p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">
          {detail}
        </p>
        {children}
      </div>
    </div>
  );
}

export default HeadPageList;