import React from 'react';

interface NewsItem {
  content: string;
}

export function FireNewsList() {
  const newsItems: NewsItem[] = [
    {
      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
    },
    {
      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
    },
    {
      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
    },
    {
      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
    },
    {
      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
    },
    {
      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
    },
  ];

  return (
    <div className="bg-gray-200 p-4 rounded-lg h-full">
      {/* 标题栏 */}
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
        <a className="text-blue-600 hover:text-blue-800 font-medium">
          查看更多 {'>'}
        </a>
      </div>

      {/* 新闻列表 */}
      <div className="space-y-4">
        {newsItems.map((item, index) => (
          <div 
            key={index} 
            className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
          >

            {/* 内容部分 */}
            <div className="flex-1 min-w-0">
              <p className="text-gray-700 text-sm ">
                {item.content}
                <a 
                  className="text-red-600 ml-1 font-medium hover:text-red-800"
                >
                  [MORE]
                </a>
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};