'use client';

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

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

export function StudyStatsSection({ studySpeedMult, studyCostMult }: StudyStatsSectionProps) {
  return (
    <DebugName name="StudyStatsSection">
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--mana-crystal)] 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 style={{ color: 'var(--text-muted)' }}>Study Speed:</span>
              <span style={{ color: 'var(--mana-crystal)' }}>×{fmtDec(studySpeedMult, 2)}</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Study Cost:</span>
              <span style={{ color: 'var(--mana-crystal)' }}>{Math.round(studyCostMult * 100)}%</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Progress Retention:</span>
              <span style={{ color: 'var(--mana-crystal)' }}>100%</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}
