---
// src/components/homelab/ProjectsSection.astro
// Making sure we properly handle the projectsData prop
const { projectsData } = Astro.props;

// If projectsData is undefined or not an array, provide a fallback
const projects = Array.isArray(projectsData) ? projectsData : [];

// Debug logging
console.log("ProjectsSection received projectsData:", !!projectsData);
console.log("ProjectsSection projects count:", projects.length);
---

<section id="projects" class="projects section-padding alt-bg">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Related Projects</h2>
      <p class="section-description">
        Explore associated projects and repositories related to the ArgoBox lab.
      </p>
    </div>
    
    <div class="projects-grid">
      {projects.length > 0 ? (
        projects.map(project => (
          <a 
            href={project.url} 
            class="project-card" 
            target="_blank"
            rel="noopener noreferrer"
          >
            <div class="project-header">
              <div class="project-icon"><i class={project.icon}></i></div>
              <h3 class="project-title">{project.title}</h3>
            </div>
            <p class="project-description">{project.description}</p>
            <div class="project-tech">
              {project.tech && project.tech.map(tech => (
                <span class="tech-badge">{tech}</span>
              ))}
            </div>
          </a>
        ))
      ) : (
        <div class="no-projects">
          <p>No projects available at this time.</p>
        </div>
      )}
    </div>
  </div>
</section>

<style>
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }

  .project-card {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
  }
  
  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  .project-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .project-icon {
    font-size: 1.5rem;
    color: var(--primary);
  }
  
  .project-title {
    font-size: 1.25rem;
    margin: 0;
  }
  
  .project-description {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
  }
  
  .project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .tech-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--bg-secondary);
    font-size: 0.75rem;
  }
  
  .no-projects {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    background-color: var(--bg-card);
    border-radius: 0.5rem;
    border: 1px solid var(--border);
  }
</style>