import type { ServicePageContent } from "@/lib/site-content";

/** "Investimento e prazo": só mostra os campos preenchidos com valor real; sem nenhum, a seção não aparece. */
export function ServiceOffer({
  service,
}: {
  service: Pick<
    ServicePageContent,
    "startingPrice" | "typicalTimeline" | "guarantee"
  >;
}) {
  const offer = [
    { label: "A partir de", value: service.startingPrice },
    { label: "Prazo típico", value: service.typicalTimeline },
    { label: "Garantia", value: service.guarantee },
  ].filter((item): item is { label: string; value: string } =>
    Boolean(item.value),
  );
  if (offer.length === 0) return null;

  return (
    <section className="ds-section" aria-labelledby="investimento-prazo">
      <div className="ds-section-shell">
        <h2 id="investimento-prazo" className="ds-card-title !mt-0">
          Investimento e prazo
        </h2>
        <dl className="mt-sp-6 grid gap-sp-6 md:grid-cols-3">
          {offer.map((item) => (
            <div
              key={item.label}
              className="border-t border-[var(--border)] pt-sp-4"
            >
              <dt className="ds-kicker">{item.label}</dt>
              <dd className="ds-copy !mt-sp-2">{item.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}