import React from 'react';
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.map((item, idx) => (
            <div key={idx} className="tech-item">
              {item.link ? (
                <a 
                  href={item.link} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  title={item.name}
                >
                  <img 
                    src={item.icon} 
                    alt={item.name}
                    loading="lazy"
                  />
                </a>
              ) : (
                <img 
                  src={item.icon} 
                  alt={item.name}
                  title={item.name}
                  loading="lazy"
                />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default TechStackSection;
