import React, { useState } from 'react';
import './ContactsSection.css';

function ContactsSection({ contacts }) {
  const [copiedType, setCopiedType] = useState(null);

  const handleCopy = (value, type) => {
    navigator.clipboard.writeText(value).then(() => {
      setCopiedType(type);
      setTimeout(() => setCopiedType(null), 2000);
    });
  };

  const getContactIcon = (type) => {
    const icons = {
      qq: '💬',
      email: '📧',
      github: '🐙',
      wechat: '💚',
      twitter: '🐦',
      linkedin: '💼'
    };
    return icons[type] || '📱';
  };

  // 判断 icon 是否为 URL
  const isImageUrl = (icon) => {
    return icon && (icon.startsWith('http://') || icon.startsWith('https://'));
  };

  // 渲染图标(支持 URL 和 Emoji)
  const renderIcon = (contact) => {
    const icon = contact.icon || getContactIcon(contact.type);
    
    if (isImageUrl(icon)) {
      return (
        <img 
          src={icon} 
          alt={contact.label}
          className="contact-icon-img"
          onError={(e) => {
            e.target.style.display = 'none';
            e.target.nextSibling.style.display = 'block';
          }}
        />
      );
    }
    
    return <span className="contact-icon-emoji">{icon}</span>;
  };

  return (
    <section className="contacts-section">
      <h2 className="section-title">
        <span className="title-icon">📮</span>
        联系方式
      </h2>
      
      <div className="contacts-grid">
        {contacts.map((contact, index) => (
          <div key={index} className="contact-card">
            <div className="contact-icon">
              {renderIcon(contact)}
            </div>
            
            <div className="contact-info">
              <h3 className="contact-label">{contact.label}</h3>
              <p className="contact-value">{contact.value}</p>
            </div>
            
            <div className="contact-actions">
              {contact.link && (
                <a
                  href={contact.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="contact-button contact-visit"
                  title="访问"
                >
                  🔗
                </a>
              )}
              
              <button
                onClick={() => handleCopy(contact.value, contact.type)}
                className="contact-button contact-copy"
                title="复制"
              >
                {copiedType === contact.type ? '✓' : '📋'}
              </button>
            </div>
            
            {copiedType === contact.type && (
              <div className="copy-toast">已复制!</div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

export default ContactsSection;