import PatientDoctorAvatar from "@/app/(patients)/_components/_patient_doctor_avatar";
import {listPlatformClients} from "@/lib/backend/api-clients";
import {useUser} from "@/lib/hooks/useUser";

export default async function PatientDoctors() {

    const {doctors, total} = await listPlatformClients();
    const currentUser = await useUser();

    return (
        <div className="p-4">

            <div>
                <h2 className="text-2xl font-bold tracking-tight">
                    Doctors
                </h2>
                <p className="text-muted-foreground">
                    Here&apos;s a list of your doctors available! You can start a session with the specific doctor you
                    want.
                </p>
            </div>


            <div className="flex space-x-4 py-4">
                {
                    Array.isArray(doctors) &&
                    doctors.map((doctor, index) => {
                        return (
                            <PatientDoctorAvatar
                                currentUser={currentUser}
                                doctor={doctor}
                                key={index}
                                className={"w-[200px]"}/>
                        )
                    })
                }
            </div>


        </div>
    )
}