import Link from "next/link";
import AppointmentList from "./appointmentList";
import DetailDoctor from "./detailDoctor";
import Share from "./detailDoctor/Share";
import CustomLoading from "@/app/component/loading/Custom";

function DoctorPage({ doctor, comments, rateAggregate, slug }) {
  return (
    <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
      <div className="flex items-center justify-between">
        <CustomLoading width={180} height={25}>
          <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
            <h2 className="text-[#9B9B9B] text-nowrap flex items-center">
              {doctor?.specialties?.map((item, idx) => (
                <span key={item.id ?? item.name} className="flex items-center">
                  <Link
                    href={`/doctors?specialty=${encodeURIComponent(item.name)}`}
                    className="hover:text-[#525252]"
                  >
                    {item.name}
                  </Link>
                  <span className="mx-1">
                    {doctor.specialties.length === idx + 1 ? ">" : "|"}
                  </span>
                </span>
              ))}
            </h2>
            <p className="text-[#525252] text-nowrap mr-1">{doctor?.name}</p>
          </div>
        </CustomLoading>
        <div className="flex lg:hidden">
          <Share data={doctor} />
        </div>
      </div>
      <div className="flex items-start justify-center gap-6 mt-[30px]">
        <DetailDoctor
          doctor={doctor}
          comments={comments}
          rateAggregate={rateAggregate}
        />
        <AppointmentList doctor={doctor} doctorSlug={slug} />
      </div>
    </div>
  );
}

export default DoctorPage;