import React from 'react';
import { Server, ServerMetrics } from '../types';
import { Cpu, MemoryStick as Memory, Server as ServerIcon } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

interface ServerCardProps {
  server: Server;
  metrics: ServerMetrics[];
}

export function ServerCard({ server, metrics }: ServerCardProps) {
  const lastMetric = metrics[metrics.length - 1] || { cpu_usage: 0, ram_usage: 0 };

  return (
    <div className="bg-gray-800 rounded-lg p-6 shadow-lg">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center space-x-3">
          <ServerIcon className="text-blue-500" size={24} />
          <h3 className="text-xl font-semibold text-white">{server.name}</h3>
        </div>
        <span className="text-gray-400 text-sm">{server.model}</span>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-6">
        <div className="bg-gray-700 p-4 rounded-lg">
          <div className="flex items-center space-x-2 mb-2">
            <Cpu className="text-green-500" size={20} />
            <span className="text-gray-300">CPU</span>
          </div>
          <p className="text-white font-semibold">{server.cpu_model}</p>
          <p className="text-blue-400 mt-2">{lastMetric.cpu_usage.toFixed(1)}% Usage</p>
        </div>

        <div className="bg-gray-700 p-4 rounded-lg">
          <div className="flex items-center space-x-2 mb-2">
            <Memory className="text-purple-500" size={20} />
            <span className="text-gray-300">Memory</span>
          </div>
          <p className="text-white font-semibold">{server.ram_gb} GB</p>
          <p className="text-blue-400 mt-2">{lastMetric.ram_usage.toFixed(1)}% Usage</p>
        </div>
      </div>

      <div className="h-40">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={metrics}>
            <XAxis 
              dataKey="timestamp" 
              stroke="#4B5563"
              tickFormatter={(value) => new Date(value).toLocaleTimeString()}
            />
            <YAxis stroke="#4B5563" />
            <Tooltip 
              contentStyle={{ 
                backgroundColor: '#1F2937',
                border: 'none',
                borderRadius: '0.5rem',
                color: '#F3F4F6'
              }}
            />
            <Line 
              type="monotone" 
              dataKey="cpu_usage" 
              stroke="#10B981" 
              strokeWidth={2}
              dot={false}
            />
            <Line 
              type="monotone" 
              dataKey="ram_usage" 
              stroke="#8B5CF6" 
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}