function formatOutputDate(ts) {
  const dt = new Date(ts * 1000); // convert seconds to milliseconds
  const now = new Date();
  const pad = num => num.toString().padStart(2, '0');
  const formatTime = date => `${pad(date.getHours())}:${pad(date.getMinutes())}`;

  const isSameDay = (d1, d2) =>
    d1.getFullYear() === d2.getFullYear() &&
    d1.getMonth() === d2.getMonth() &&
    d1.getDate() === d2.getDate();

  const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);

  if (isSameDay(dt, now)) {
    return `today / ${formatTime(dt)}`;
  } else if (isSameDay(dt, yesterday)) {
    return `yesterday / ${formatTime(dt)}`;
  } else {
    const day = pad(dt.getDate());
    const month = pad(dt.getMonth() + 1);
    const year = dt.getFullYear();
    return `${day}.${month}.${year} ${formatTime(dt)}`;
  }
}

class LoadMoreNews extends React.Component {
  constructor(props) {
    super(props);
    this.state = { offset: 30, items: [], showLoadMore: true };
  }

  loadMore = () => {
    const { offset } = this.state;
    // Изменено: Добавляем параметр lang, если указан window.LANG
    const url = `${window.API_HOST}/api/cluster?limit=30&offset=${offset}${window.LANG ? `&lang=${window.LANG}` : ""}${window.COIN ? `&coin=${window.COIN}` : ""}`;
    fetch(url)
      .then(response => response.json())
      .then(data => {
        // Expecting API returns: { items: [ ... ] }
        const newItems = data.items || [];
        this.setState(prevState => ({
          offset: prevState.offset + 30,
          items: prevState.items.concat(newItems),
          showLoadMore: newItems.length === 30
        }));
      })
      .catch(error => console.error('Error fetching news:', error));
  };

  render() {
    return (
      <div>
        <div>
          {this.state.items.map((item, index) => (
            item.result && item.result.length > 0 ? (
              <div className="cluster-item" key={index}>
                <div className="date_cluster">
                  {formatOutputDate(item.result[0].created_at)}
                </div>
                <a className="card-title link-title" href={`/news${item.result[0].uri}`}>
                  {item.result[0].title}
                </a>
                { item.result[0].short_summary ? (
                // Исправлено: заменён атрибут class на className
                <a className="link-summary" href={`/news${item.result[0].uri}`}>
                  {item.result[0].short_summary}
                </a>
                ) : null }
                { item.result[0].ai_result && item.result[0].ai_result.length > 0 ? (
                  <div className="cluster-coin-list-meta">
                    <div className="cluster-coin-list">
                      {item.result[0].ai_result.map((ai, aiIndex) => (
                        <div className="cluster-coin-list-item" key={aiIndex}>
                          <a className="coin-link" href={`/coin/${ai.coin}`}>
                            {ai.coin}
                            { ai.priceChangePercent ? (
                              <span className={`cluster-coin-percent trend-${ai.priceChangeTrand}`}>
                                {ai.priceChangePercent}%
                              </span>
                            ) : null }
                          </a>
                        </div>
                      ))}
                    </div>
                    <div className="cluster-coin-list-footer">
                      { item.result[0].affect ? (
                        <div className="cluster-coin-list-trend">
                          affect: <span className={`trend-${item.result[0].affect}`}>{item.result[0].affect}</span>
                        </div>
                      ) : null }
                      <div className="cluster-coin-list-source">
                        {item.count_news} sources
                      </div>
                    </div>
                  </div>
                ) : null }
              </div>
            ) : null
          ))}
        </div>
        {this.state.showLoadMore && (
          <button className="load_more_news_btn" onClick={this.loadMore}>
            Load More News
          </button>
        )}
      </div>
    );
  }
} 

ReactDOM.render(<LoadMoreNews />, document.getElementById('reactLoadMore'));