import React from 'react';
import { getTechstackIconUrl, techBadgeSurfaceStyle, techBadgeLabelColor } from '../api';
import './TechStackSection.css';

function TechStackSection({ techstack }) {
  if (!techstack || !techstack.items) 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 = getTechstackIconUrl(item);
              const badgePaint = item.color || '#555555';

              const badgeContent = (
                <div
                  className="tech-badge"
                  style={{
                    ...techBadgeSurfaceStyle(badgePaint),
                    color: techBadgeLabelColor(badgePaint),
                  }}
                >
                  <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;
