import React from 'react';
import './VerifiedDomainBadge.css';

/**
 * Displays verified domain badge on user profile
 * @param {Object} props
 * @param {string} props.verifiedDomain - The verified domain name
 * @param {string} props.verificationType - Type of verification (dns or blockchain)
 * @param {Date} props.verifiedAt - When the domain was verified
 */
export default function VerifiedDomainBadge({ 
  verifiedDomain, 
  verificationType = 'dns',
  verifiedAt 
}) {
  if (!verifiedDomain) return null;

  return (
    <div className="verified-domain-badge">
      <div className="badge-content">
        <span className="domain-text">{verifiedDomain}</span>
        <span 
          className="checkmark" 
          title={`Verified via ${verificationType === 'blockchain' ? 'blockchain' : 'DNS'}`}
        >
          ✓
        </span>
      </div>
      {verificationType === 'blockchain' && (
        <span className="blockchain-indicator" title="Verified via blockchain">
          ⛓️
        </span>
      )}
      {verifiedAt && (
        <div className="verified-info">
          Verified {new Date(verifiedAt).toLocaleDateString()}
        </div>
      )}
    </div>
  );
}