"use client";

import Image from "next/image";
import "./VolunteersTable.scss";
import arrow_down_icon from "./icons/arrow-down-icon.svg";
import arrow_up_icon from "./icons/arrow-up-icon.svg";
import Link from "next/link";
import { useVolunteers } from "./volunteer.store";
import { useEffect } from "react";

const VolunteersTable = () => {
  const { getVolunteers, data } = useVolunteers();

  useEffect(() => {
    getVolunteers();
  }, []);

  return (
    <div className="volunteers-table">
      <table cellSpacing={0}>
        <thead>
          <tr>
            <th>№</th>
            <th>Активист</th>
            <th>
              <div>
                Добавлено дорог
                <Image src={arrow_down_icon} alt="Arrow Down Icon" />
                <Image src={arrow_up_icon} alt="Arrow Up Icon" />
              </div>
            </th>
            <th>
              <div>
                Получено голосов{" "}
                <Image src={arrow_down_icon} alt="Arrow Down Icon" />
                <Image src={arrow_up_icon} alt="Arrow Up Icon" />
              </div>
            </th>
            <th>
              <div>
                Оставлено голосов{" "}
                <Image src={arrow_down_icon} alt="Arrow Down Icon" />
                <Image src={arrow_up_icon} alt="Arrow Up Icon" />
              </div>
            </th>
            <th>
              <div>
                Рейтинг{" "}
                <Image src={arrow_down_icon} alt="Arrow Down Icon" />
                <Image src={arrow_up_icon} alt="Arrow Up Icon" />
              </div>
            </th>
          </tr>
        </thead>

        <tbody>
          {data.map((volunteer) => (
            <tr key={volunteer.user_id}>
              <td>1</td>
              <td>
                <Link href={"#"}>{volunteer.username}</Link>
              </td>
              <td>{volunteer.report_count}</td>
              <td>{volunteer.likes_received_count}</td>
              <td>{volunteer.likes_given_count}</td>
              <td>{volunteer.average_rating}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default VolunteersTable;
