import React from "react";
import moment from "moment";
import Image from "next/image";

export default function PuanDurumuTable({ standings }) {
  console.log("standings", standings);
  return (
    <div className="relative ">
      <table className="w-full  text-left text-gray-500 dark:text-gray-400     ">
        <thead className="text-base text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3"
            >
              #
            </th>
            <th
              scope="col"
              className="p-2 text-left border-r-2 w-48 border-white"
            >
              Takım
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3"
            >
              O
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3"
            >
              G
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3"
            >
              B
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3"
            >
              M
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3 "
            >
              AG
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3 "
            >
              YG
            </th>
            <th
              scope="col"
              className="p-2 text-center border-r-2 border-white w-3 "
            >
              AV
            </th>
            <th scope="col" className="p-2 text-center w-3 ">
              P
            </th>
          </tr>
        </thead>
        <tbody>
          {standings.map((item, index) => (
            <tr
              key={index}
              className={` border-b bg-white dark:bg-gray-900 dark:border-gray-700 `}
            >
              <td
                className={`p-2 text-center text-base ${
                  item?.position > 15 && "bg-red-200"
                } `}
              >
                {item?.position}
              </td>
              <td key={index} className="p-2  flex ">
                <div className="w-4 relative object-cover mr-2">
                  <Image sizes="w-4" src={item?.logo} fill alt={item?.name} />
                </div>
                <div className=" text-base  hidden sm:block ">{item?.name}</div>
                <div className=" text-base block sm:hidden ">
                  {item?.shortName}
                </div>
              </td>
              <td className="p-2 text-center text-base">{item?.played}</td>
              <td className="p-2 text-center text-base">{item?.against}</td>
              <td className="p-2 text-center text-base">{item?.drawn}</td>
              <td className="p-2 text-center text-base">{item?.lost}</td>
              <td className="p-2 text-center text-base">{item?.scored}</td>
              <td className="p-2 text-center text-base">{item?.against}</td>
              <td className="p-2 text-center text-base">{item?.average}</td>
              <td className="p-2 text-center text-base bg-slate-50 font-semibold">
                {item?.points}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className=" flex gap-4 flex-wrap  mt-4 text-xs">
        <div>
          <b className="mr-1">#:</b>Sıralama
        </div>
        <div>
          <b className="mr-1">Takım:</b>Takım
        </div>
        <div>
          <b className="mr-1">O:</b>Oynadığı Maç
        </div>
        <div>
          <b className="mr-1">G:</b>Galibiyet
        </div>
        <div>
          <b className="mr-1">B:</b>Beraberlik
        </div>
        <div>
          <b className="mr-1">M:</b>Mağlubiyet
        </div>
        <div>
          <b className="mr-1">AG:</b>Attığı Gol
        </div>
        <div>
          <b className="mr-1">YG:</b>Yediği Gol
        </div>
        <div>
          <b className="mr-1">AV:</b>Averaj
        </div>
        <div>
          <b className="mr-1">P:</b>Puan
        </div>
        <div>
          <b className="mr-1">S.Maç:</b> Sonraki Maç
        </div>
      </div>
    </div>
  );
}
