import { ROAD_TYPES_STATS } from "@/shared/variables/road-types";
import "./StatisticsSection.scss";
import { apiInstance } from "@/shared/config/apiConfig";

interface ICategoryStatistics {
  category: number;
  total: number;
}

const StatisticsSection = async () => {
  const getCategoryStatistics = async () => {
    const res = await apiInstance.get<ICategoryStatistics[]>(
      "/report/category_count/"
    );

    return res.data;
  };

  const statistics = await getCategoryStatistics();

  return (
    <section className="statistics-section">
      <ul className="statistics-section__list">
        {statistics.map((cat) => (
          <li key={cat.category}>
            <p>{ROAD_TYPES_STATS[cat.category]}</p>
            <span>{cat.total}</span>
          </li>
        ))}
      </ul>
    </section>
  );
};

export default StatisticsSection;