"use client";

import Chart from "./chart";
import Comment from "@/app/component/comment";
import ModalAnswer from "./modal/ModalAnswer";

function Comments({ doctor, comments, rateAggregate }) {
  const isUnclaimed = doctor?.owner_status !== "claimed";
  const hasComments = comments?.length > 0;
  const hideRatingBlock = isUnclaimed && !hasComments;

  return (
    <div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
      <a
        id="comments"
        className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
      ></a>
      <p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
        نظرات کاربران{" "}
      </p>
      <div className="mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start">
        <p className="text-[#616161] text-[16px] font-normal">
          شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:
        </p>
        <ModalAnswer doctor={doctor} />
      </div>
      {hideRatingBlock ? (
        <p className="mt-[16px] text-[#616161] text-[14px] md:text-[16px] font-normal">
          هنوز نظری برای این پزشک ثبت نشده است.
        </p>
      ) : (
        <>
          <Chart comments={comments} rateAggregate={rateAggregate} />
          <Comment comments={comments} doctor={doctor} />
        </>
      )}
    </div>
  );
}

export default Comments;