import { Node } from '@/types/monitoring';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { StatusIndicator } from './StatusIndicator';
import { ServiceCard } from './ServiceCard';
import { Server, Clock } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
import { fr } from 'date-fns/locale';

interface NodeCardProps {
  node: Node;
}

export function NodeCard({ node }: NodeCardProps) {
  return (
    <div className="space-y-3 sm:space-y-4 animate-fade-in">
      <Card className="glass-card border-l-4 border-l-primary">
        <CardHeader className="pb-2 sm:pb-3 p-3 sm:p-6">
          <div className="flex items-start sm:items-center justify-between gap-2">
            <div className="flex items-center gap-2 sm:gap-3 min-w-0">
              <div className="p-1.5 sm:p-2 rounded-lg bg-primary/10 flex-shrink-0">
                <Server className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
              </div>
              <div className="min-w-0">
                <CardTitle className="text-base sm:text-lg font-semibold truncate">{node.name}</CardTitle>
                <p className="text-xs sm:text-sm text-muted-foreground font-mono truncate">{node.address}</p>
              </div>
            </div>
            <StatusIndicator status={node.status} showLabel size="lg" className="flex-shrink-0" />
          </div>
        </CardHeader>
        <CardContent className="p-3 sm:p-6 pt-0 sm:pt-0">
          <div className="flex items-center gap-2 text-[10px] sm:text-xs text-muted-foreground">
            <Clock className="w-3 h-3 flex-shrink-0" />
            <span className="truncate">Dernière connexion: {formatDistanceToNow(node.lastSeen, { addSuffix: true, locale: fr })}</span>
          </div>
        </CardContent>
      </Card>
      
      <div className="grid gap-3 sm:gap-4 grid-cols-1 md:grid-cols-2">
        {node.services.map((service) => (
          <ServiceCard key={service.id} service={service} />
        ))}
      </div>
    </div>
  );
}