"use client";

import { usePortfolioData } from "@/lib/usePortfolioData";
import { Section } from "./Section";

export default function Skills() {
  const { data, loading, error } = usePortfolioData();

  if (loading) return <div className="ds-loading">Loading skill registry</div>;
  if (error || !data) {
    return <div className="ds-error">Error loading skill registry</div>;
  }

  return (
    <Section
      id="skills"
      eyebrow="MODULE_REGISTRY.lib"
      title="Stack modular para produto, operação e escala"
      description="Ferramentas escolhidas por previsibilidade operacional, velocidade de entrega e facilidade de manutenção."
      dark
    >
      <div className="ds-grid-2">
        {data.skills.technical.map((category, index) => (
          <article key={category.category} className="ds-card">
            <div className="flex items-center justify-between gap-sp-4">
              <div className="ds-kicker">ID_0{index + 1}X</div>
              <div className="ds-metric">{category.skills.length} items</div>
            </div>
            <h3 className="ds-card-title">{category.category}</h3>
            <ul className="ds-tags mt-sp-6">
              {category.skills.map((skill) => (
                <li key={skill} className="ds-tag">
                  {skill}
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  );
}