import { secondaryButtonDark } from "@/app/components/button-styles";
import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
import { CaseMedia } from "./CaseMedia";
import { getCaseMedia } from "./case-media";

/** O bloco "Como ficou" existe quando há site no ar ou captura gravada, no computador ou no celular. */
export function hasCaseMedia({
  id,
  demoUrl,
}: Pick<CaseStudyContent, "id" | "demoUrl">) {
  return (
    Boolean(demoUrl) ||
    Boolean(getCaseMedia(id, "desktop")) ||
    Boolean(getCaseMedia(id, "mobile"))
  );
}

/** "Como ficou": pôster e vídeo do projeto e o botão para abrir o site. Sem site nem captura, não mostra nada. */
export function CaseMediaSection({
  caseStudy,
}: {
  caseStudy: Pick<CaseStudyContent, "id" | "title" | "demoUrl">;
}) {
  if (!hasCaseMedia(caseStudy)) return null;

  return (
    <section
      className="ds-section ds-section-dark"
      aria-labelledby="case-media"
    >
      <div className="ds-section-shell">
        <h2 id="case-media" className="ds-card-title !mt-0 text-white">
          Como ficou
        </h2>
        <CaseMedia
          id={caseStudy.id}
          title={caseStudy.title}
          demoUrl={caseStudy.demoUrl}
        />
        {caseStudy.demoUrl ? (
          <div className="mt-sp-8">
            <a
              className={secondaryButtonDark}
              href={caseStudy.demoUrl}
              target="_blank"
              rel="noopener noreferrer"
            >
              {buttonLabels.site}
              <span className="sr-only"> {caseStudy.title}</span>
            </a>
          </div>
        ) : null}
      </div>
    </section>
  );
}