import { scheduleList, tableTitle } from "../../data";
import Image from "next/image";
import { useEffect, useState } from "react";
import { useQuery } from "react-query";
import React from "react";
type Item = {
  presenterid: number;
  userid: number;
  email: string;
  firstname: string;
  initials: string;
  phone: number;
  surname: string;
  presenterpassword: string;
  profileImage: string;
  registerid: number;
};
interface MyComponentProps {
  updatedPresenter: Item[];
}
const Reacentuser: React.FC<MyComponentProps> = ({ updatedPresenter }) => {
  return (
    <div className="grid grid-cols-2 gap-5">
      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
            {updatedPresenter && (
              <tr>
                {tableTitle.map((tableTitledata) => (
                  <th key={tableTitledata.id} scope="col" className="px-6 py-3">
                    {tableTitledata.name}
                  </th>
                ))}
              </tr>
            )}
          </thead>
          <tbody>
            {updatedPresenter ? (
              updatedPresenter
                .slice(updatedPresenter.length / 2, updatedPresenter.length)
                .map((scheduleListdata) => {
                  return (
                    <tr
                      key={scheduleListdata.presenterid}
                      className="bg-white border-b"
                    >
                      <td className="px-6 py-4">
                        <div className="flex">
                          <div>
                            {scheduleListdata.profileImage && (
                              <Image
                                // src="https://w7.pngwing.com/pngs/340/946/png-transparent-avatar-user-computer-icons-software-developer-avatar-child-face-heroes.png"
                                // src="../../../public/images/1689673213899_approachA.png"
                                src={scheduleListdata.profileImage}
                                className="w-[4rem] mx-2 mb-1 rounded-full h-30"
                                alt="Avatar"
                                width={25}
                                height={25}
                              />
                            )}
                          </div>
                          <div>
                            {scheduleListdata.firstname +
                              " " +
                              scheduleListdata.surname}
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4">{scheduleListdata.initials}</td>
                      <td className="px-6 py-4">{scheduleListdata.email}</td>
                      <td className="px-6 py-4">{scheduleListdata.phone}</td>
                    </tr>
                  );
                })
            ) : (
              <h1>Hello Vivek</h1>
            )}
          </tbody>
        </table>
      </div>
      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
            {updatedPresenter && (
              <tr>
                {tableTitle.map((tableTitledata) => (
                  <th key={tableTitledata.id} scope="col" className="px-6 py-3">
                    {tableTitledata.name}
                  </th>
                ))}
              </tr>
            )}
          </thead>
          <tbody>
            {updatedPresenter ? (
              updatedPresenter
                .slice(0, updatedPresenter.length / 2)
                .map((scheduleListdata) => {
                  return (
                    <tr
                      key={scheduleListdata.presenterid}
                      className="bg-white border-b"
                    >
                      <div className="flex">
                        <div>
                          {scheduleListdata.profileImage && (
                            <Image
                              // src="https://w7.pngwing.com/pngs/340/946/png-transparent-avatar-user-computer-icons-software-developer-avatar-child-face-heroes.png"
                              // src="../../../public/images/1689673213899_approachA.png"
                              src={scheduleListdata.profileImage}
                              className="w-[4rem] mx-2 mb-1 rounded-full h-30"
                              alt="Avatar"
                              width={25}
                              height={25}
                            />
                          )}
                        </div>
                        <div>
                          {scheduleListdata.firstname +
                            " " +
                            scheduleListdata.surname}
                        </div>
                      </div>
                      <td className="px-6 py-4">{scheduleListdata.initials}</td>
                      <td className="px-6 py-4">{scheduleListdata.email}</td>
                      <td className="px-6 py-4">{scheduleListdata.phone}</td>
                    </tr>
                  );
                })
            ) : (
              <h1>Hello Vivek</h1>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Reacentuser;