import React from "react";
import type { CrossBridgeLink } from "../scenarios/types";

interface CrossCourseBridgeProps {
  links?: CrossBridgeLink[];
  onNavigate?: (scenarioId: string) => void;
}

export const CrossCourseBridge: React.FC<CrossCourseBridgeProps> = ({
  links,
  onNavigate,
}) => {
  if (!links || links.length === 0) return null;

  return (
    <div className="rounded-xl border border-indigo-150 bg-gradient-to-br from-indigo-50/50 via-white to-purple-50/40 p-4 shadow-xs">
      <div className="mb-2.5 flex items-center gap-2">
        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">
          ⇄
        </span>
        <h4 className="text-xs font-bold uppercase tracking-wider text-indigo-950">
          Cầu nối học thuật Vi • Vĩ mô
        </h4>
      </div>

      <p className="mb-3 text-xs text-slate-600">
        Khám phá nền tảng vi mô hoặc hệ quả vĩ mô liên quan mật thiết đến mô hình hiện tại:
      </p>

      <div className="space-y-2.5">
        {links.map((link, idx) => {
          const domainLabel =
            link.domain === "macro"
              ? "Kinh tế Vĩ mô"
              : link.domain === "micro"
              ? "Kinh tế Vi mô"
              : "Cầu nối Vi • Vĩ mô";

          return (
            <div
              key={idx}
              className="rounded-lg border border-indigo-100 bg-white p-3 shadow-2xs transition-all hover:border-indigo-200"
            >
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <span className="rounded bg-indigo-100 px-2 py-0.5 text-[10px] font-bold text-indigo-800">
                    {domainLabel}
                  </span>
                  <span className="text-xs font-bold text-slate-800">
                    {link.title}
                  </span>
                </div>
                {link.tag && (
                  <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold text-slate-600">
                    {link.tag}
                  </span>
                )}
              </div>

              <p className="mt-1.5 text-xs text-slate-600 leading-relaxed">
                {link.description}
              </p>

              {link.targetScenarioId && (
                <div className="mt-2 text-right">
                  <button
                    type="button"
                    onClick={() => onNavigate?.(link.targetScenarioId!)}
                    className="inline-flex items-center gap-1 text-xs font-bold text-indigo-600 transition-colors hover:text-indigo-800"
                  >
                    <span>Xem mô hình liên kết</span>
                    <span>→</span>
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};