"use client";

import { useState } from "react";
import ItemDoctor from "@/app/component/ItemDoctor";

// همان گرید و همان کارت پزشکِ /doctors — فقط بدون ماشین فیلتر، چون این صفحه
// از قبل روی «تخصص + شهر» فیلتر شده و لیستش SSR می‌آید.
function DoctorGrid({ doctors: initialDoctors = [] }) {
  const [doctors, setDoctors] = useState(initialDoctors);

  if (!doctors.length) {
    return (
      <p className="text-center py-10 text-gray-500">
        دکتری برای نمایش وجود ندارد.
      </p>
    );
  }

  return (
    <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
      {doctors.map((doctor, idx) => (
        <ItemDoctor
          key={doctor.id}
          doctor={doctor}
          priority={idx < 3}
          setDoctors={setDoctors}
        />
      ))}
    </ul>
  );
}

export default DoctorGrid;