'use client';

import { fmtDec } from '@/lib/game/stores';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BookOpen } from 'lucide-react';

// Modular stores
import { useSkillStore, usePrestigeStore } from '@/lib/game/stores';

export interface StudyStatsSectionProps {
  studySpeedMult: number;
  studyCostMult: number;
}

export function StudyStatsSection({ studySpeedMult, studyCostMult }: StudyStatsSectionProps) {
  // Get state from modular stores
  const skills = useSkillStore((s) => s.skills);
  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);

  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
          <BookOpen className="w-4 h-4" />
          Study Stats
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Study Speed:</span>
              <span className="text-purple-300">×{fmtDec(studySpeedMult, 2)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Quick Learner Bonus:</span>
              <span className="text-purple-300">+{((skills.quickLearner || 0) * 10)}%</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Study Cost:</span>
              <span className="text-purple-300">{Math.round(studyCostMult * 100)}%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Focused Mind Bonus:</span>
              <span className="text-purple-300">-{((skills.focusedMind || 0) * 5)}%</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Progress Retention:</span>
              <span className="text-purple-300">{Math.round((1 + (skills.knowledgeRetention || 0) * 0.2) * 100)}%</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

StudyStatsSection.displayName = "StudyStatsSection";