'use client';

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

interface CombatStatsSectionProps {
  activeSpellDef: SpellDef | null;
  pactMultiplier: number;
  critChance: number;
  critDamage: number;
}

export function CombatStatsSection({ activeSpellDef, pactMultiplier, critChance, critDamage }: CombatStatsSectionProps) {
  return (
    <DebugName name="CombatStatsSection">
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--mana-fire)] game-panel-title text-xs flex items-center gap-2">
          <Swords className="w-4 h-4" />
          Combat Stats
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Active Spell Base Damage:</span>
              <span style={{ color: 'var(--text-secondary)' }}>{activeSpellDef?.dmg || 5}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Pact Multiplier:</span>
              <span style={{ color: 'var(--mana-light)' }}>×{fmtDec(pactMultiplier, 2)}</span>
            </div>
            <div className="flex justify-between text-sm font-semibold border-t border-[var(--border-subtle)] pt-2">
              <span style={{ color: 'var(--text-secondary)' }}>Total Damage:</span>
              <span style={{ color: 'var(--mana-fire)' }}>{fmt(activeSpellDef ? activeSpellDef.dmg * pactMultiplier : 0)}</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Critical Chance:</span>
              <span style={{ color: 'var(--mana-light)' }}>{fmtDec(critChance * 100, 1)}%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Critical Multiplier:</span>
              <span style={{ color: 'var(--mana-light)' }}>{fmtDec(critDamage, 2)}x</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}
