import { useGameStore } from "../store/useGameStore";
import { ACHIEVEMENTS } from "../data/achievements";
import "../scss/achievements.scss";

function Achievements() {
  const state = useGameStore((s) => s.state);

  const unlocked = ACHIEVEMENTS.filter((a) => a.check(state));
  const locked = ACHIEVEMENTS.filter((a) => !a.check(state));

  return (
    <div className="fullachieve">
      <h1>Succès</h1>
      <p className="achieve-counter">
        {unlocked.length} / {ACHIEVEMENTS.length}
      </p>

      <div className="achievementscontainer">
        <div className="achievementscardcontainer">
          {unlocked.map((a) => (
            <div key={a.id} className="achieve-card achieve-unlocked">
              <span className="achieve-icon">{a.icon}</span>
              <div className="achieve-info">
                <p className="achieve-name">{a.name}</p>
                <p className="achieve-desc">{a.description}</p>
              </div>
            </div>
          ))}

          {locked.map((a) => (
            <div key={a.id} className="achieve-card achieve-locked">
              <span className="achieve-icon">🔒</span>
              <div className="achieve-info">
                <p className="achieve-name">{a.name}</p>
                <p className="achieve-desc">???</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Achievements;