/**
 * MaterialComplementarCard — Card de referência à Biblioteca OnFide
 *
 * ADR-009: integração por referência. Nunca duplica acervo da Biblioteca.
 */

interface MaterialComplementarCardProps {
  titulo: string;
  descricao?: string;
  /** Slug do material na Biblioteca — ex: "livro/oracao" ou "pdf/guia-jejum" */
  slug: string;
}

const BIBLIOTECA_BASE_URL = "https://biblioteca.onfide.com.br";

export default function MaterialComplementarCard({
  titulo,
  descricao,
  slug,
}: MaterialComplementarCardProps) {
  const url = `${BIBLIOTECA_BASE_URL}/${slug.replace(/^\/+/, "")}`;

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="group flex items-center gap-4 p-4 rounded-2xl transition-all"
      style={{
        background: "rgba(255,255,255,0.04)",
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      {/* Ícone da Biblioteca — livro */}
      <div
        className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
        style={{ background: "rgba(16, 185, 129, 0.15)" }}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} className="w-6 h-6 text-emerald-300">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
        </svg>
      </div>

      <div className="flex-1 min-w-0">
        <p className="text-[10px] uppercase tracking-widest font-bold font-ui text-emerald-300/70 mb-0.5">
          Biblioteca OnFide
        </p>
        <h4 className="text-sm font-semibold font-ui text-white truncate group-hover:text-emerald-300 transition-colors">
          {titulo}
        </h4>
        {descricao && (
          <p className="text-xs text-white/40 truncate mt-0.5">{descricao}</p>
        )}
      </div>

      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-4 h-4 text-white/30 flex-shrink-0 group-hover:text-emerald-300 group-hover:translate-x-0.5 transition-all">
        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
      </svg>
    </a>
  );
}
