Function IntegrationStatus

src/components/IntegrationStatus.tsx:55–114

({ integrations }: IntegrationStatusProps)

};

export function IntegrationStatus({ integrations }: IntegrationStatusProps) {
  if (!integrations) {
    return (
      <div className="bg-gray-900 rounded-xl p-6 animate-pulse">
        <div className="h-6 bg-gray-800 rounded w-1/3 mb-4"></div>
        <div className="space-y-3">
          <div className="h-16 bg-gray-800 rounded"></div>
          <div className="h-16 bg-gray-800 rounded"></div>
          <div className="h-16 bg-gray-800 rounded"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-gray-900 rounded-xl p-6">
      <h2 className="text-xl font-semibold text-white mb-6 flex items-center gap-2">
        <MessageCircle className="w-5 h-5 text-emerald-400" />
        Integrations
      </h2>

      <div className="space-y-3">
        {integrations.map((integration) => {
          const Icon = iconMap[integration.icon] || MessageCircle;
          const status = statusConfig[integration.status];
          const StatusIcon = status.icon;

          return (
            <div
              key={integration.id}
              className={`flex items-center justify-between p-4 rounded-lg border ${status.bg} ${status.border}`}
            >
              <div className="flex items-center gap-3">
                <div className="p-2 bg-gray-800 rounded-lg">
                  <Icon className="w-5 h-5 text-gray-300" />
                </div>
                <div>
                  <div className="font-medium text-white">{integration.name}</div>
                  {integration.lastActivity && (
                    <div className="text-xs text-gray-400">
                      Last activity:{" "}
                      {formatDistanceToNow(new Date(integration.lastActivity), {
                        addSuffix: true,
                      })}
                    </div>
                  )}
                </div>
              </div>

              <div className={`flex items-center gap-2 ${status.color}`}>
                <StatusIcon className="w-4 h-4" />
                <span className="text-sm font-medium">{status.label}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>