import Pageguide from "@/app/component/Pageguide";
import DoctorGrid from "./DoctorGrid";
import Faq from "./Faq";

// چیدمان عمداً هم‌خانوادهٔ /doctors است: همان padding-responsive، همان فاصلهٔ بالای صفحه،
// همان تایپوگرافی عنوان و همان گرید کارت پزشک — کاربر نباید حس کند وارد بخش دیگری شده.
function SpecialtyDetailPage({ specialtyName, cityName, doctors, intro, faq, origin }) {
  return (
    <div className="pt-[95px] sm:pt-[120px] padding-responsive">
      <Pageguide
        origin={origin}
        list={[
          { name: "خانه", href: "/" },
          { name: "تخصص‌ها", href: "/specialties" },
          { name: specialtyName },
        ]}
      />

      <h1 className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold mt-[24px]">
        متخصص {specialtyName} در {cityName}
      </h1>

      <p className="text-[#525252] text-[14px] md:text-[16px] font-normal leading-8 mt-[16px] text-justify">
        {intro}
      </p>

      <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
        <DoctorGrid doctors={doctors} />
      </div>

      <Faq items={faq} />
    </div>
  );
}

export default SpecialtyDetailPage;