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

interface DiskMetricCardProps {
  performance: SystemPerformance;
  getUsageColor: (usage: number) => string;
  getUsageStatus: (usage: number) => string;
  formatBytes: (bytes: number) => string;
}

export function DiskMetricCard({ performance, getUsageColor, getUsageStatus, formatBytes }: DiskMetricCardProps) {
  return (
    <Card className="p-6">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <HardDrive className="w-5 h-5 text-purple-600" />
          <h3>磁盘使用率</h3>
        </div>
        <Badge className={getUsageColor(performance.disk.usage)}>
          {getUsageStatus(performance.disk.usage)}
        </Badge>
      </div>
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">使用率</span>
          <span className={getUsageColor(performance.disk.usage)}>
            {performance.disk.usage.toFixed(1)}%
          </span>
        </div>
        <Progress value={performance.disk.usage} className="h-2" />
        <div className="grid grid-cols-3 gap-4 text-sm">
          <div>
            <span className="text-muted-foreground">已用</span>
            <p>{formatBytes(performance.disk.used)}</p>
          </div>
          <div>
            <span className="text-muted-foreground">可用</span>
            <p>{formatBytes(performance.disk.free)}</p>
          </div>
          <div>
            <span className="text-muted-foreground">总量</span>
            <p>{formatBytes(performance.disk.total)}</p>
          </div>
        </div>
      </div>
    </Card>
  );
}