wulf-pulse/components/configuration-items/contact-cell.tsx

'use client';

import { Badge } from '@/components/ui/badge';
import { User } from 'lucide-react';

interface ContactCellProps {
  contactId?: number;
  contacts?: Record<number, any>;
}

export function ContactCell({ contactId, contacts }: ContactCellProps) {
  if (!contactId) {
    return <span className="text-xs text-muted-foreground">-</span>;
  }

  // Get contact from the contacts map
  const contact = contacts?.[contactId];
  
  if (contact) {
    const contactName = `${contact.firstName || ''} ${contact.lastName || ''}`.trim();
    if (contactName) {
      return (
        <Badge variant="outline" className="text-xs">
          <User className="w-3 h-3 mr-1" />
          {contactName}
        </Badge>
      );
    }
  }

  return <span className="text-xs text-muted-foreground">ID: {contactId}</span>;
}