"use client";

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

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

  const projects = useMemo(
    () => data?.projects.filter((p) => p.featured) || [],
    [data],
  );

  if (loading)
    return <div className="ds-loading">Loading featured projects</div>;
  if (error)
    return <div className="ds-error">Error loading featured projects</div>;

  return (
    <Section
      id="projects"
      eyebrow="PRODUCAO_INTELECTUAL"
      title="Projetos com recorte técnico claro e impacto observável"
      description="Seleção de produtos e ferramentas onde performance, confiabilidade e clareza de arquitetura foram requisitos reais."
      dark
    >
      <div className="ds-grid-2">
        {projects.map((project) => (
          <article key={project.id} className="ds-card">
            <div className="flex items-start justify-between gap-sp-6">
              <div>
                <div className="ds-kicker">{project.category}</div>
                <h3 className="ds-card-title">{project.title}</h3>
                <p className="mt-sp-2 text-[11px] uppercase tracking-[0.1em] text-[rgba(255,255,255,.36)]">
                  {project.subtitle}
                </p>
              </div>
              <span className="ds-tag">{project.status}</span>
            </div>
            <p className="ds-copy">{project.description}</p>
            <div className="mt-sp-6 flex flex-wrap gap-sp-3">
              {project.githubUrl && (
                <a
                  href={project.githubUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="ds-link ds-link-muted"
                >
                  GitHub
                </a>
              )}
              {project.demoUrl && (
                <a
                  href={project.demoUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="ds-link ds-link-accent"
                >
                  Live demo
                </a>
              )}
            </div>
            <ul className="ds-tags mt-sp-6">
              {project.technologies.slice(0, 6).map((tech: string) => (
                <li key={tech} className="ds-tag">
                  {tech}
                </li>
              ))}
            </ul>
            <div className="mt-sp-6 flex flex-wrap gap-sp-4">
              <span className="ds-metric">
                Complexity {project.metrics?.complexity || 3}/5
              </span>
              {project.metrics?.teamSize && (
                <span className="ds-metric">
                  Team {project.metrics.teamSize}
                </span>
              )}
            </div>
          </article>
        ))}
      </div>
    </Section>
  );
}