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

function TechStackSection({ techstack }) {
  if (!techstack || !techstack.items) return null;

  // 获取API基础URL，用于处理图标路径
  // 使用环境变量配置的API地址，默认为 nav.api.shumengya.top
  const apiBaseUrl = process.env.REACT_APP_API_URL || 
                     (process.env.NODE_ENV === 'development' 
                       ? 'http://localhost:5000/api' 
                       : 'https://nav.api.shumengya.top/api');

  // 获取图标URL
  const getIconUrl = (item) => {
    if (item.svg) {
      return `${apiBaseUrl}/logo/${item.svg}`;
    }
    return null;
  };

  return (
    <section className="techstack-section">
      <h2 className="section-title">
        <span className="title-icon">🛠️</span>
        {techstack.title}
      </h2>
      
      <div className="techstack-container">
        <div className="tech-items">
          {techstack.items
            .filter(item => item.show !== false)
            .map((item, idx) => {
              const iconUrl = getIconUrl(item);
              const backgroundColor = item.color || '#555555';
              
              const badgeContent = (
                <div 
                  className="tech-badge" 
                  style={{ 
                    backgroundColor: backgroundColor,
                    color: backgroundColor === '#FFFFFF' ? '#000000' : 'white'
                  }}
                >
                  <div className="badge-icon">
                    {iconUrl ? (
                      <img 
                        src={iconUrl} 
                        alt={item.name}
                        loading="lazy"
                      />
                    ) : (
                      <span className="badge-icon-placeholder">?</span>
                    )}
                  </div>
                  <span className="badge-text">{item.name}</span>
                </div>
              );

              return (
                <div key={idx} className="tech-item">
                  {item.link ? (
                    <a 
                      href={item.link} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      title={item.name}
                      className="tech-badge-link"
                    >
                      {badgeContent}
                    </a>
                  ) : (
                    badgeContent
                  )}
                </div>
              );
            })}
        </div>
      </div>
    </section>
  );
}

export default TechStackSection;
