import { CaseCover, coverSizes } from "@/app/cases/_components/CaseCover";
import { getCaseMedia } from "@/app/cases/_components/case-media";
import { textLinkDark } from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
import {
  buttonLabels,
  type CaseStudyContent,
  type HeroDevice,
} from "@/lib/site-content";

/**
 * Capa do case de destaque ao lado do título do serviço: o site no computador (moldura de navegador) ou no celular
 * (moldura de celular), conforme `device`. Sem captura do aparelho pedido, não mostra nada.
 * Embaixo, a legenda: o nome do case, por que ele interessa a este serviço (`relevance`) e o botão "Ver case". É esta
 * legenda que cita o case na página: ele não ganha um cartão a mais mais abaixo, porque a mesma imagem e o mesmo nome
 * não aparecem duas vezes. A imagem também leva ao case, mas fica fora da leitura e da tabulação (o link da legenda
 * já leva ao mesmo lugar).
 */
export function ServiceHeroCover({
  caseStudy,
  device = "desktop",
  relevance,
}: {
  caseStudy?: CaseStudyContent;
  device?: HeroDevice;
  /** Por que o case interessa ao serviço, em uma frase. */
  relevance?: string;
}) {
  if (!caseStudy) return null;

  const href = `/cases/${caseStudy.id}`;
  const media =
    device === "mobile" ? getCaseMedia(caseStudy.id, "mobile") : null;
  if (device === "mobile" && !media) return null;

  return (
    <figure
      className={`min-w-0 ${device === "mobile" ? "mx-auto w-full max-w-[360px]" : ""}`}
    >
      <HoverPrefetchLink
        href={href}
        aria-hidden="true"
        tabIndex={-1}
        className={
          media ? "mx-auto block w-[min(62vw,240px)] min-w-0" : "block min-w-0"
        }
      >
        {media ? (
          <PhoneFrame poster={media.poster} />
        ) : (
          <CaseCover
            id={caseStudy.id}
            title={caseStudy.title}
            demoUrl={caseStudy.demoUrl}
            sizes={coverSizes.hero}
            priority
          />
        )}
      </HoverPrefetchLink>
      <figcaption className="mt-sp-4 text-[15px] leading-6 text-white/75">
        <strong className="font-semibold text-white">{caseStudy.title}</strong>
        {relevance ? `: ${relevance}` : null}
        <span className="mt-sp-1 block">
          <HoverPrefetchLink
            href={href}
            className={`${textLinkDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
          >
            {buttonLabels.case}
            <span className="sr-only"> {caseStudy.title}</span>
          </HoverPrefetchLink>
        </span>
      </figcaption>
    </figure>
  );
}