import { IUserRatings } from "@/shared/types/user-rating-type";
import "./VolunteersTable.scss";
import Image from "next/image";
import arrows from "@/shared/icons/arrows.svg";

interface IVolunteersTableProps {
  firstData: IUserRatings[] | string;
}

const VolunteersTable: React.FC<IVolunteersTableProps> = ({
  firstData,
}: IVolunteersTableProps) => {
  const params = [
    { param: "№" },
    { param: "Активист" },
    { param: "Добавлено дорог", handleClick() {} },
    { param: "Получено голосов", handleClick() {} },
    { param: "Оставлено голосов", handleClick() {} },
    { param: "Рейтинг", handleClick() {} },
  ];
  return (
    <div className="volunteers-table">
      <table>
        <thead>
          <tr>
            {params.map((param) => (
              <td key={param.param}>
                {param.handleClick ? (
                  <button>
                    {param.param}
                    <Image src={arrows} alt="Arrows Icon" />
                  </button>
                ) : (
                  <>{param.param}</>
                )}
              </td>
            ))}
          </tr>
        </thead>
        <tbody>
          {typeof firstData === "string" ? (
            <h3>{firstData}</h3>
          ) : (
            firstData.map((user, index) => (
              <tr key={user.user_id}>
                <td>{index + 1}</td>
                <td id="volunteers-user-cell">{user.username}</td>
                <td>{user.report_count}</td>
                <td>{user.likes_received_count}</td>
                <td>{user.likes_given_count}</td>
                <td>{user.average_rating}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default VolunteersTable;