// src/components/homelab/ServiceCategory.astro

---
const { category } = Astro.props;

function getCategoryIcon(categoryKey) {
  if (categoryKey === 'development') return 'fa-code';
  if (categoryKey === 'media') return 'fa-photo-video';
  if (categoryKey === 'utilities') return 'fa-tools';
  return 'fa-cogs'; // Default for infrastructure
}

const categoryIcon = getCategoryIcon(category.key);
const categoryTitle = category.key.charAt(0).toUpperCase() + category.key.slice(1);
---

<div class="services-category" data-category={category.key}>
  <h3 class="category-title">
    <i class={`fas ${categoryIcon} category-icon`}></i>
    {categoryTitle} Tools
  </h3>
  <div class="service-items">
    {category.services.map(service => (
      <a
        href={service.available ? service.url : '#'}
        class={`service-item ${service.available ? 'available' : ''} service-${service.name.toLowerCase().replace(/\s+/g, '-')}`}
        target={service.available ? "_blank" : null}
        rel={service.available ? "noopener noreferrer" : null}
        aria-disabled={!service.available}
        data-service={service.name.toLowerCase().replace(/\s+/g, '-')}
      >
        <div class="service-icon"><i class={service.icon}></i></div>
        <div class="service-info">
          <div class="service-name">{service.name}</div>
          <p class="service-description">{service.description}</p>
        </div>
        <span class={`service-status ${service.status}`}>
          <span class="status-dot"></span>
          {service.status.charAt(0).toUpperCase() + service.status.slice(1)}
        </span>
      </a>
    ))}
  </div>
</div>

<style>
  .services-category {
    margin-bottom: 2rem;
  }
  
  .category-title {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  
  .category-icon {
    margin-right: 0.75rem;
    opacity: 0.8;
  }
  
  .service-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
  }
  
  .service-item {
    display: flex;
    padding: 1.25rem;
    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);
    position: relative;
  }
</style>