"use client";

import Link from "next/link";
import type { PortfolioProjectView } from "@/lib/portfolio-data";
import { secondaryButtonDark } from "./button-styles";
import { Section } from "./Section";
import { ProjectReel } from "./showcase/ProjectReel";
import { ShowcaseProvider } from "./showcase/ShowcaseProvider";

/** Vitrine única da home: recebe só projetos de cliente (o filtro vem de app/page.tsx). */
export default function Projects({
  projects,
}: {
  projects: PortfolioProjectView[];
}) {
  return (
    <Section
      id="projects"
      eyebrow="Projetos"
      title="Veja o que já saiu do papel."
      description="Projetos feitos para empresas. Abra um case para entender o problema, a solução e as decisões por trás da interface."
      dark
      disableChildrenAnimation
    >
      <ShowcaseProvider projects={projects}>
        <ProjectReel />
      </ShowcaseProvider>

      <div className="mt-sp-8" data-reel-stagger="left">
        <Link href="/cases" className={secondaryButtonDark}>
          Ver todos os cases
        </Link>
      </div>
    </Section>
  );
}