// Ted's Picks — horizontally-scrollable row of recommended markets. Each card links to
// the market with Ted's ?r=ted referral. Cards with a matching tweet show "Ted's take";
// the rest fall back to a centered "Ted's pick" card.
const { useRef: useRefM } = React;

function RecommendedMarkets() {
  const list = window.DASH.recommendedMarkets || [];
  if (!list.length) return null;
  const trackRef = useRefM(null);
  const avatar = (window.DASH.meta && window.DASH.meta.avatar) || "assets/ted_avatar.jpg";
  const slide = (dir) => {
    const el = trackRef.current;
    if (el) el.scrollBy({ left: dir * 340, behavior: "smooth" });
  };
  return (
    <section className="card panel">
      <div className="panel-head">
        <div className="panel-titles">
          <div className="panel-eyebrow"><Icon name="spark" size={14} color="var(--ll-neon)" /> Ted&rsquo;s Picks</div>
          <h2 className="panel-title">Recommended Markets</h2>
          <p className="panel-desc">Markets Ted is watching, with his take where he&rsquo;s posted on it.</p>
        </div>
        <div className="panel-meta">
          <div className="mkt-nav">
            <button className="mkt-arrow" aria-label="Scroll left" onClick={() => slide(-1)}>&lsaquo;</button>
            <button className="mkt-arrow" aria-label="Scroll right" onClick={() => slide(1)}>&rsaquo;</button>
          </div>
        </div>
      </div>

      <div className="mkt-track" ref={trackRef}>
        {list.map((mkt, i) => (
          <div className={"market-card" + (mkt.tweet ? "" : " plain")} key={i}>
            <a className="mkt" href={mkt.url} target="_blank" rel="noopener">
              {mkt.emoji
                ? <span className="market-emoji">{mkt.emoji}</span>
                : (mkt.image ? <img className="market-img" src={mkt.image} alt="" loading="lazy" /> : null)}
              <span className="mkt-body"><span className="market-q">{mkt.title}</span></span>
              <span className="market-cta">Trade</span>
              {!mkt.tweet ? <span className="ptag">★ Ted&rsquo;s pick</span> : null}
            </a>

            {mkt.tweet ? (
              <div className="mkt-tweet">
                <div className="tw-label"><span className="tw-x">𝕏</span> Ted&rsquo;s take</div>
                <div className="tw-head">
                  <img className="tw-av" src={avatar} alt="" />
                  <span className="tw-id">
                    <span className="tw-name">Ted</span>
                    <span className="tw-handle">@TedPillows</span>
                  </span>
                </div>
                <div className="tw-text">{mkt.tweet.text}</div>
                <div className="tw-foot">
                  <span className="tw-time">{mkt.tweet.date}</span>
                  <a className="tw-view" href={mkt.tweet.url} target="_blank" rel="noopener">View on 𝕏</a>
                </div>
              </div>
            ) : null}
          </div>
        ))}
      </div>
    </section>
  );
}

window.RecommendedMarkets = RecommendedMarkets;