/**
 * آدرس‌های پزشک در سایدبار. وقتی محل نوبت‌دهی انتخاب شده باشد، فقط همان محل نشان
 * داده می‌شود تا با اسلات‌های نمایش‌داده‌شده هم‌خوان بماند.
 */
function Address({ doctor, selectedLocation }) {
  if (selectedLocation) {
    return (
      <ul className="hidden mt-[4px] lg:flex flex-col">
        <li>
          <div className="flex py-[12px] text-[var(--ap-text-2)] text-[14px] items-start justify-start">
            <p className="font-bold min-w-[115px]">{`${selectedLocation.title}: `}</p>
            <p className="font-normal">{selectedLocation.address || "—"}</p>
          </div>
        </li>
      </ul>
    );
  }

  return (
    <ul className="hidden mt-[4px] lg:flex flex-col">
      {doctor?.address?.map((item, idx) => (
        <li key={idx}>
          <div className="flex py-[12px] text-[var(--ap-text-2)] text-[14px] items-start justify-start">
            <p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
            <p className="font-normal">{item.address || item.location}</p>
          </div>
          {doctor.address.length > idx + 1 && (
            <span className="bg-[var(--ap-border)] block h-px w-full"></span>
          )}
        </li>
      ))}
    </ul>
  );
}

export default Address;