import { textLink } from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";

/**
 * Bloco menor depois de "Onde já apliquei isso": trabalhos parecidos que não são a prova principal do serviço, em uma linha
 * cada (nome, por que interessam e o link do case), sem capa. Sem case, não mostra nada.
 */
export function ServiceAlsoCases({
  title,
  cases,
  relevance,
}: {
  title: string;
  cases: readonly CaseStudyContent[];
  /** Por que cada case interessa ao serviço (chave: id do case); sem frase própria, vale o resumo do case. */
  relevance: Readonly<Record<string, string>>;
}) {
  if (cases.length === 0) return null;

  return (
    <section className="ds-section" aria-labelledby="tambem-faco-titulo">
      <div className="ds-section-shell">
        <h2 id="tambem-faco-titulo" className="ds-card-title !mt-0">
          {title}
        </h2>
        <ul className="mt-sp-6 divide-y divide-[var(--border)] border-y border-[var(--border)]">
          {cases.map((caseStudy) => (
            <li
              key={caseStudy.id}
              className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] md:gap-sp-8"
            >
              <h3 className="text-base font-semibold leading-6">
                {caseStudy.title}
              </h3>
              <p className="ds-copy !mt-0">
                {relevance[caseStudy.id] ?? caseStudy.summary}
              </p>
              <HoverPrefetchLink
                href={`/cases/${caseStudy.id}`}
                className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
              >
                {buttonLabels.case}
                <span className="sr-only"> {caseStudy.title}</span>
              </HoverPrefetchLink>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}