---
import Layout from '../../../layouts/Layout_1.astro';
import { APP_NAME } from '../../../config/app';
import { newsIndex } from '../../../../utils/rpc';
import Breadcrumb from '../../../components/Breadcrumb.astro';

const {code, data} = await newsIndex();


const title = `${APP_NAME} - 新闻专栏`;
const description = '知识回声最新新闻动态、行业资讯、合作信息。';
const keywords = '知识回声,知识回声新闻,知识回声动态,知识回声合作';
---
<Layout title={title} description={description} keywords={keywords}>
  <Breadcrumb data={[{ title: '新闻专栏', link: 'javascript;' }]} />
  <div class="news-container">
    <section class="news-content">
      <div class="news-list">
        <!-- <h3>最新动态</h3> -->
        <ul>
          {
            data.map(news => (
              <li>
                <a href={`/news/${news.id}`} title={news.title}>
                  <span class="news-title">{news.title}</span>
                  <span class="news-date">{news.created_at}</span>
                </a>
              </li>
            ))
          }
        </ul>
      </div>
    </section>
  </div>

  <style>
    .news-container{
      padding: 1rem;
    }

    .news-content a {
      text-decoration: none;
    }

    .news-list {
      margin-bottom: 2rem;
      /* background: var(--bg-secondary); */
      /* border-radius: var(--radius-lg); */
      overflow: hidden;
    }

    .news-list h3 {
      padding: 1rem;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 1rem;
      /* color: var(--text-primary); */
    }

    .news-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .news-list li {
      margin-bottom: 0.8rem;
    }

    .news-list li:last-child {
      margin-bottom: 0;
    }

    .news-list a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      border-radius: var(--radius-md);
      transition: all 0.2s;
    }

    .news-list .news-title {
      flex: 1;
      margin-right: 1rem;
      font-size: 0.95rem;
      color: black;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .news-list .news-date {
      font-size: 0.85rem;
      color: var(--text-primary);
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      .news-list a {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>
</Layout>
