import { useState } from "react";
import AchievementsCard from "../components/AchievementsCard";
import "../scss/achievements.scss";
import { useGameStore } from "../store/useGameStore";
import achievements from "../data/Achievements.json";

function Achievements() {
  const resources = useGameStore((s) => s.state.resources);
  let score = 1;
  if (resources >= 25) {
    score = Math.floor((resources - 25) / 400) + 1;
  } else {
    score = 0;
  }
  return (
    <div className="fullachieve">
      <h1>Succès</h1>
      <div className="achievementscontainer">
        <div className="achievementscardcontainer">
          {achievements &&
            achievements.slice(0, score).map((a) => {
              return (
                <AchievementsCard
                  key={a.id}
                  name={a.name}
                  description={a.description}
                  image={a.image}
                />
              );
            })}
        </div>
      </div>
    </div>
  );
}

export default Achievements;
