import Link from "next/link";
import { textLinkDark } from "@/app/components/button-styles";
import { getRelatedServices } from "@/lib/site-content";

/** Quantos serviços aparecem no fim do case: dois cards bastam para levar a pessoa ao serviço certo sem virar um menu. */
export const MAX_RELATED_SERVICES = 2;

/** Cards dos serviços que citam este case (no máximo dois), sobre fundo escuro. Sem serviço relacionado, não mostra nada. */
export function CaseRelatedServices({ caseId }: { caseId: string }) {
  const services = getRelatedServices(caseId).slice(0, MAX_RELATED_SERVICES);
  if (services.length === 0) return null;

  return (
    <div className="mt-sp-10">
      <p className="ds-kicker">Serviços ligados a este projeto</p>
      <ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
        {services.map((service) => (
          <li key={service.slug} className="flex">
            <article className="ds-card w-full">
              <h3 className="ds-card-title !mt-0">{service.navLabel}</h3>
              <p className="ds-copy">{service.intro}</p>
              <Link
                className={`${textLinkDark} mt-sp-4 self-start`}
                href={`/servicos/${service.slug}`}
              >
                Ver o serviço: {service.navLabel}
              </Link>
            </article>
          </li>
        ))}
      </ul>
    </div>
  );
}