import React from 'react';
import type { SidChain } from '../../../src/types';

export interface SidChainTrackerProps {
  sidChain: SidChain;
}

const sidFields = [
  { key: 'customerProfileSid', label: 'Customer Profile', icon: '👤' },
  { key: 'businessEndUserSid', label: 'Business End User', icon: '🏢' },
  { key: 'authorizedRepEndUserSid', label: 'Authorized Rep', icon: '👔' },
  { key: 'addressSid', label: 'Address', icon: '📍' },
  { key: 'supportingDocSid', label: 'Supporting Doc', icon: '📄' },
  { key: 'trustProductSid', label: 'Trust Product', icon: '🛡️' },
  { key: 'a2pProfileEndUserSid', label: 'A2P Profile', icon: '📱' },
  { key: 'brandRegistrationSid', label: 'Brand Registration', icon: '🏷️' },
  { key: 'messagingServiceSid', label: 'Messaging Service', icon: '💬' },
  { key: 'campaignSid', label: 'Campaign', icon: '📢' }
];

export const SidChainTracker: React.FC<SidChainTrackerProps> = ({ sidChain }) => {
  return (
    <div className="space-y-3">
      {sidFields.map((field) => {
        const value = sidChain[field.key as keyof SidChain];
        const hasValue = !!value;
        
        return (
          <div
            key={field.key}
            className={`flex items-center justify-between p-3 rounded-lg border ${
              hasValue
                ? 'border-green-200 bg-green-50'
                : 'border-gray-200 bg-gray-50'
            }`}
          >
            <div className="flex items-center gap-3">
              <span className="text-2xl">{field.icon}</span>
              <div>
                <p className="text-sm font-medium text-gray-900">{field.label}</p>
                {hasValue ? (
                  <code className="text-xs text-gray-600 font-mono">{value}</code>
                ) : (
                  <p className="text-xs text-gray-500">Not created yet</p>
                )}
              </div>
            </div>
            <div>
              {hasValue ? (
                <span className="text-green-600">✓</span>
              ) : (
                <span className="text-gray-400">○</span>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
};