import { Card } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Server } from 'lucide-react';
import { SystemPerformance } from '@/types/monitor';

interface JvmInfoCardProps {
  performance: SystemPerformance;
  formatBytes: (bytes: number) => string;
}

export function JvmInfoCard({ performance, formatBytes }: JvmInfoCardProps) {
  if (!performance.jvm) {
    return null;
  }

  return (
    <Card className="p-6">
      <div className="flex items-center gap-2 mb-4">
        <Server className="w-5 h-5 text-orange-600" />
        <h3>JVM信息</h3>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        <div>
          <p className="text-sm text-muted-foreground">堆内存使用</p>
          <p className="mt-1">{performance.jvm.heapUsage.toFixed(1)}%</p>
          <Progress value={performance.jvm.heapUsage} className="h-1 mt-2" />
        </div>
        <div>
          <p className="text-sm text-muted-foreground">堆内存</p>
          <p className="mt-1">
            {formatBytes(performance.jvm.heapUsed)} / {formatBytes(performance.jvm.heapMax)}
          </p>
        </div>
        <div>
          <p className="text-sm text-muted-foreground">非堆内存</p>
          <p className="mt-1">{formatBytes(performance.jvm.nonHeapUsed)}</p>
        </div>
        <div>
          <p className="text-sm text-muted-foreground">线程数</p>
          <p className="mt-1">{performance.jvm.threadCount}</p>
        </div>
        <div>
          <p className="text-sm text-muted-foreground">GC次数</p>
          <p className="mt-1">{performance.jvm.gcCount}</p>
        </div>
        <div>
          <p className="text-sm text-muted-foreground">GC耗时</p>
          <p className="mt-1">{performance.jvm.gcTime}ms</p>
        </div>
      </div>
    </Card>
  );
}