import { useEffect, useState } from 'react';

type News = { id: string; title: string; date: string; summary: string };

export default function NewsList() {
  const [news, setNews] = useState<News[]>([]);
  useEffect(() => {
    // TODO: 替换为实际 API 调用
    setNews([
      { id: '1', title: '产品发布：全新加速方案', date: '2025-07-01', summary: '推出基于 AI 路由的网络加速方案...' },
      { id: '2', title: '平台升级维护公告', date: '2025-06-15', summary: '计划于06/20进行例行维护，届时服务可能短暂中断...' },
    ]);
  }, []);

  return (
    <section className="px-6 py-section bg-background">
      <h2 className="text-3xl font-semibold mb-8">新闻资讯</h2>
      <div className="space-y-6">
        {news.map(item => (
          <article key={item.id} className="p-4 bg-gray-50 rounded-lg hover:shadow">
            <h3 className="text-xl font-medium">{item.title}</h3>
            <time className="text-sm text-gray-500">{item.date}</time>
            <p className="mt-2 text-gray-700 text-sm">{item.summary}</p>
          </article>
        ))}
      </div>
    </section>
  );
}