/**
 * EventoRelacionadoCard — Card de referência à Comunidade Filadélfia
 *
 * ADR-009: integração por referência. Nunca duplica eventos/agenda.
 */

interface EventoRelacionadoCardProps {
  titulo: string;
  data?: string;
  /** Slug do evento — ex: "evento/retiro-de-oracao" ou vazio para home da Comunidade */
  slug?: string;
}

const COMUNIDADE_BASE_URL = "https://filadelfia.onfide.com.br";

export default function EventoRelacionadoCard({
  titulo,
  data,
  slug = "",
}: EventoRelacionadoCardProps) {
  const url = slug
    ? `${COMUNIDADE_BASE_URL}/${slug.replace(/^\/+/, "")}`
    : COMUNIDADE_BASE_URL;

  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 Comunidade — calendário */}
      <div
        className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
        style={{ background: "rgba(244, 114, 182, 0.15)" }}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} className="w-6 h-6 text-pink-300">
          <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
        </svg>
      </div>

      <div className="flex-1 min-w-0">
        <p className="text-[10px] uppercase tracking-widest font-bold font-ui text-pink-300/70 mb-0.5">
          Comunidade Filadélfia
        </p>
        <h4 className="text-sm font-semibold font-ui text-white truncate group-hover:text-pink-300 transition-colors">
          {titulo}
        </h4>
        {data && (
          <p className="text-xs text-white/40 truncate mt-0.5">{data}</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-pink-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>
  );
}
