// ─── TalmudicLayout.jsx ───────────────────────────────────────
// Centre claim with drop-cap, two margin columns for supporting +
// opposing case-law. RTL by default. Designed for the "answered"
// state of the workspace.

function TalmudicLayout({ query, doctrine, strength, body, pros, cons, exceptions, children }) {
  return (
    <div className="le-talmud" dir="rtl">
      <div className="le-talmud-tag">§ ניתוח · {doctrine}</div>

      <aside className="le-talmud-side le-talmud-side--pro">
        <div className="le-talmud-side-head">
          <span className="le-talmud-side-mark">A</span>
          <span className="le-talmud-side-label pro">תומך</span>
        </div>
        {pros && pros.map((p, i) => (
          <div className="le-talmud-source" key={`pro-${i}`}>
            <div className="le-talmud-source-title">{p.title}</div>
            <p className="le-talmud-source-excerpt">{p.excerpt}</p>
            <div className="le-talmud-source-cite">{p.cite}</div>
          </div>
        ))}
      </aside>

      <div className="le-talmud-center">
        <div className="le-talmud-eyebrow">טענה · CLAIM</div>
        <p className="le-talmud-q">{query}</p>
        <div className="le-talmud-rule"/>
        <div className="le-talmud-body">
          {body}
          {children}
        </div>
      </div>

      <aside className="le-talmud-side le-talmud-side--con">
        <div className="le-talmud-side-head">
          <span className="le-talmud-side-mark">B</span>
          <span className="le-talmud-side-label con">סותר</span>
        </div>
        {cons && cons.map((p, i) => (
          <div className="le-talmud-source" key={`con-${i}`}>
            <div className="le-talmud-source-title">{p.title}</div>
            <p className="le-talmud-source-excerpt">{p.excerpt}</p>
            <div className="le-talmud-source-cite">{p.cite}</div>
          </div>
        ))}
        {exceptions && (
          <>
            <div className="le-talmud-side-head" style={{marginTop: 20}}>
              <span className="le-talmud-side-mark">C</span>
              <span className="le-talmud-side-label">חריגים</span>
            </div>
            <div className="le-talmud-exceptions">
              {exceptions.map((e, i) => <span className="le-talmud-chip" key={i}>{e}</span>)}
            </div>
          </>
        )}
      </aside>
    </div>
  );
}

window.TalmudicLayout = TalmudicLayout;