import Pageguide from "@/app/component/Pageguide";
import { parentSpecialty } from "@/lib/specialtyIndexing";
import DoctorGrid from "./DoctorGrid";
import Faq from "./Faq";
import SpecialtyTree from "./SpecialtyTree";

// چیدمان عمداً هم‌خانوادهٔ /doctors است: همان padding-responsive، همان فاصلهٔ بالای صفحه،
// همان تایپوگرافی عنوان و همان گرید کارت پزشک — کاربر نباید حس کند وارد بخش دیگری شده.
function SpecialtyDetailPage({ specialty, specialtyName, cityName, doctors, intro, faq, origin, slug }) {
  const parent = parentSpecialty(specialty);

  return (
    <div className="pt-[95px] sm:pt-[120px] padding-responsive">
      <Pageguide
        origin={origin}
        list={[
          { name: "خانه", href: "/" },
          { name: "تخصص‌ها", href: "/specialties" },
          // زیرتخصص از دل گروهش می‌آید؛ بدون این حلقه، مسیر بازگشت به گروه فقط
          // دستکاری URL بود. Pageguide همین فهرست را به BreadcrumbList هم می‌دهد،
          // پس نسخهٔ بصری و schema واگرا نمی‌شوند.
          ...(parent ? [{ name: parent.name, href: `/specialties/${parent.slug}` }] : []),
          // href صفحهٔ جاری: بدون آن `item` غایب می‌شود و اسکیما نامعتبر است
          { name: specialtyName, href: slug ? `/specialties/${slug}` : "/specialties" },
        ]}
      />

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

      <SpecialtyTree specialty={specialty} />

      <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;