'use client';

import { useGameContext } from '../GameContext';

export function GameFooter() {
  const { store } = useGameContext();

  return (
    <footer className="sticky bottom-0 bg-gray-900/80 border-t border-gray-700 px-4 py-2 text-center text-xs text-gray-500">
      <span className="text-gray-400">Loop {store.loopCount + 1}</span>
      {' • '}
      <span>Pacts: {store.signedPacts.length}/{store.pactSlots}</span>
      {' • '}
      <span>Spells: {Object.values(store.spells).filter((s) => s.learned).length}</span>
      {' • '}
      <span>Skills: {Object.values(store.skills).reduce((a, b) => a + b, 0)}</span>
    </footer>
  );
}