'use client';

import { Cpu, HardDrive, Activity } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';

export function ResourceUtilizationTile() {
  // Mock data - in production, this would come from API
  const utilization = {
    cpu: { used: 68, total: 100 },
    memory: { used: 45, total: 100 },
    storage: { used: 72, total: 100 },
  };

  const getColor = (percent: number) => {
    if (percent >= 80) return 'text-red-400';
    if (percent >= 60) return 'text-yellow-400';
    return 'text-green-400';
  };

  const getBgColor = (percent: number) => {
    if (percent >= 80) return 'bg-red-500/20';
    if (percent >= 60) return 'bg-yellow-500/20';
    return 'bg-green-500/20';
  };

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white flex items-center gap-2">
          <Activity className="h-5 w-5 text-orange-500" />
          Resource Utilization
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <Cpu className="h-4 w-4 text-blue-400" />
                <span className="text-sm text-gray-400">CPU</span>
              </div>
              <span className={`text-sm font-semibold ${getColor(utilization.cpu.used)}`}>
                {utilization.cpu.used}%
              </span>
            </div>
            <div className="w-full bg-gray-900 rounded-full h-2">
              <div 
                className={`h-2 rounded-full ${getBgColor(utilization.cpu.used)}`}
                style={{ width: `${utilization.cpu.used}%` }}
              />
            </div>
          </div>

          <div>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <Activity className="h-4 w-4 text-purple-400" />
                <span className="text-sm text-gray-400">Memory</span>
              </div>
              <span className={`text-sm font-semibold ${getColor(utilization.memory.used)}`}>
                {utilization.memory.used}%
              </span>
            </div>
            <div className="w-full bg-gray-900 rounded-full h-2">
              <div 
                className={`h-2 rounded-full ${getBgColor(utilization.memory.used)}`}
                style={{ width: `${utilization.memory.used}%` }}
              />
            </div>
          </div>

          <div>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <HardDrive className="h-4 w-4 text-cyan-400" />
                <span className="text-sm text-gray-400">Storage</span>
              </div>
              <span className={`text-sm font-semibold ${getColor(utilization.storage.used)}`}>
                {utilization.storage.used}%
              </span>
            </div>
            <div className="w-full bg-gray-900 rounded-full h-2">
              <div 
                className={`h-2 rounded-full ${getBgColor(utilization.storage.used)}`}
                style={{ width: `${utilization.storage.used}%` }}
              />
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

