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

interface InputBannerProps {
  meta: ScenarioMeta;
}

export const InputBanner: React.FC<InputBannerProps> = ({ meta }) => {
  return (
    <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        {/* Baseline Input Parameters */}
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-xs font-bold uppercase tracking-wider text-slate-500">
            Thông số cơ sở:
          </span>
          {meta.inputBanner && meta.inputBanner.length > 0 ? (
            <div className="flex flex-wrap items-center gap-2">
              {meta.inputBanner.map((item, idx) => (
                <div
                  key={idx}
                  className="flex items-center gap-1.5 rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-800"
                >
                  <span className="text-slate-500">{item.label}:</span>
                  <span className="font-mono font-bold text-indigo-700">
                    {item.value}
                  </span>
                </div>
              ))}
            </div>
          ) : (
            <span className="text-xs text-slate-400">
              Mặc định theo mô hình lý thuyết
            </span>
          )}
        </div>

        {/* Academic Source & Reference */}
        <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
          <div className="flex items-center gap-1 rounded-md bg-indigo-50 px-2.5 py-1 text-indigo-900 font-medium">
            <span className="font-semibold">Nguồn học thuật:</span>
            <span>{meta.source}</span>
          </div>

          <div className="flex items-center gap-1 rounded-md bg-amber-50 px-2 py-1 text-amber-900 font-medium">
            <span className="font-semibold">NotebookLM:</span>
            <span className="font-mono">{meta.notebook_id}</span>
          </div>
        </div>
      </div>
    </div>
  );
};