/**
 * SecaoEcossistema — Seção "Do Ecossistema ONFIDE"
 *
 * Agrupa os três cards de referência (Instituto, Biblioteca, Comunidade)
 * em uma seção visual consistente, usada na página de Episódio.
 *
 * Fase 1.5: dados estáticos/curados manualmente por categoria do conteúdo.
 * Fase 5: dados dinâmicos vindos de recomendação por tema/tag.
 * O componente visual não muda entre as fases.
 */

import CursoRelacionadoCard from "./CursoRelacionadoCard";
import MaterialComplementarCard from "./MaterialComplementarCard";
import EventoRelacionadoCard from "./EventoRelacionadoCard";

interface SecaoEcossistemaProps {
  curso?: { titulo: string; descricao?: string; slug: string };
  material?: { titulo: string; descricao?: string; slug: string };
  evento?: { titulo: string; data?: string; slug?: string };
}

export default function SecaoEcossistema({
  curso,
  material,
  evento,
}: SecaoEcossistemaProps) {
  // Se nenhuma referência foi configurada para este conteúdo, não renderiza nada.
  if (!curso && !material && !evento) return null;

  return (
    <section className="mt-12">
      <h2 className="text-xs font-bold font-ui uppercase tracking-widest text-white/40 mb-1">
        Do Ecossistema ONFIDE
      </h2>
      <p className="text-xs text-white/30 mb-4">
        Continue aprofundando este tema nas demais plataformas ONFIDE
      </p>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        {curso && (
          <CursoRelacionadoCard
            titulo={curso.titulo}
            descricao={curso.descricao}
            slug={curso.slug}
          />
        )}
        {material && (
          <MaterialComplementarCard
            titulo={material.titulo}
            descricao={material.descricao}
            slug={material.slug}
          />
        )}
        {evento && (
          <EventoRelacionadoCard
            titulo={evento.titulo}
            data={evento.data}
            slug={evento.slug}
          />
        )}
      </div>
    </section>
  );
}
