import { primaryButton } from "@/app/components/button-styles";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
import { similarProjectSubject } from "@/lib/whatsapp";
import { hasCaseMedia } from "./CaseMediaSection";

/**
 * Logo depois de "Como ficou": o que o cliente passou a poder fazer (2 ou 3 itens, sem número, só com o que as entregas já sustentam)
 * e, de novo, o botão de contato, para quem acabou de ver o resultado não precisar rolar até o fim da página.
 * Sem itens, só o botão (e só quando há "Como ficou"); sem itens e sem mídia, a seção não aparece.
 */
export function CaseCapabilitiesSection({
  caseStudy,
  isClient,
}: {
  caseStudy: Pick<
    CaseStudyContent,
    "id" | "title" | "demoUrl" | "capabilities"
  >;
  isClient: boolean;
}) {
  const capabilities = caseStudy.capabilities ?? [];
  const showContact = hasCaseMedia(caseStudy);
  if (capabilities.length === 0 && !showContact) return null;

  return (
    <section className="ds-section" aria-labelledby="case-capabilities">
      <div className="ds-section-shell">
        {capabilities.length > 0 ? (
          <>
            <h2 id="case-capabilities" className="ds-card-title !mt-0">
              {isClient
                ? "O que o cliente passou a poder fazer"
                : "O que dá para fazer com ele"}
            </h2>
            <ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
              {capabilities.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </>
        ) : (
          <h2 id="case-capabilities" className="sr-only">
            Fale sobre o seu projeto
          </h2>
        )}
        {showContact ? (
          <div className="mt-sp-8">
            <WhatsAppLink
              service={similarProjectSubject(caseStudy.title)}
              placement="case_after_media"
              className={primaryButton}
            >
              {buttonLabels.contact}
            </WhatsAppLink>
          </div>
        ) : null}
      </div>
    </section>
  );
}