import Link from 'next/link';
import StatusBadge from './StatusBadge';
import { HardDrive, Cpu, MemoryStick, Info, Terminal } from 'lucide-react';

interface VM {
  vmid: string;
  name: string;
  status: string;
  mem: string;
  bootdisk: string;
}

interface VMCardProps {
  vm: VM;
}

export default function VMCard({ vm }: VMCardProps) {
  const hasConsoleAccess = vm.vmid === '100';

  return (
    <div className="bg-background-card rounded-2xl border border-border p-6 hover:shadow-elevated hover:-translate-y-1 hover:border-foreground/20 transition-all duration-200">
      {/* Header */}
      <div className="flex justify-between items-start mb-4">
        <div>
          <h3 className="text-xl font-bold text-foreground mb-1">{vm.name}</h3>
          <p className="text-sm text-foreground-muted">ID: {vm.vmid}</p>
        </div>
        <StatusBadge status={vm.status} />
      </div>
      
      {/* Stats */}
      <div className="space-y-3 mb-6">
        <div className="flex items-center gap-3 text-sm">
          <HardDrive className="w-4 h-4 text-foreground-subtle" />
          <span className="text-foreground-muted">Storage</span>
          <span className="ml-auto text-foreground font-medium">{vm.bootdisk} GB</span>
        </div>
        <div className="flex items-center gap-3 text-sm">
          <Cpu className="w-4 h-4 text-foreground-subtle" />
          <span className="text-foreground-muted">Memory</span>
          <span className="ml-auto text-foreground font-medium">{vm.mem} MB</span>
        </div>
      </div>

      {/* Actions */}
      <div className="flex gap-2">
        <Link 
          href={`/vm/${vm.vmid}`}
          className="flex-1 inline-flex items-center justify-center gap-2 bg-background-card text-foreground hover:bg-background-elevated border border-border px-4 py-2 rounded-xl text-sm font-medium transition-all hover:border-foreground/20"
        >
          <Info className="w-4 h-4" />
          Details
        </Link>
        
        {hasConsoleAccess && (
          <Link
            href={`/terminal/${vm.vmid}`}
            className="flex-1 inline-flex items-center justify-center gap-2 bg-foreground text-background hover:bg-foreground/90 px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-[1.02]"
          >
            <Terminal className="w-4 h-4" />
            Console
          </Link>
        )}
      </div>
    </div>
  );
}