'use client';

import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
import { useCombatStore, useManaStore, usePrestigeStore } from '@/lib/game/stores';
import { DebugName } from '@/lib/game/debug-context';

export function AchievementsTab() {
  const achievements = useCombatStore((s) => s.achievements);
  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
  const totalManaGathered = useManaStore((s) => s.totalManaGathered);
  const signedPacts = usePrestigeStore((s) => s.signedPacts);
  const totalSpellsCast = useCombatStore((s) => s.totalSpellsCast);
  const totalDamageDealt = useCombatStore((s) => s.totalDamageDealt);
  const totalCraftsCompleted = useCombatStore((s) => s.totalCraftsCompleted);

  return (
    <DebugName name="AchievementsTab">
    <div className="space-y-4">
      <AchievementsDisplay
        achievements={achievements}
        gameState={{
          maxFloorReached,
          totalManaGathered,
          signedPacts,
          totalSpellsCast,
          totalDamageDealt,
          totalCraftsCompleted,
        }}
      />
    </div>
  </DebugName>
  );
}

AchievementsTab.displayName = "AchievementsTab";