import React from 'react';

export function FireNewsList() {
  const articles = [
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: true,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: true,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: true,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
	];

  return (
    <div>
				{/* 文章列表 */}
				<div className=" bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1 absolute right-0 ">
				{/* 标题栏 */}
				<div className="flex justify-between items-center mb-6  border-b-3 border-white">
					<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
					<button className="">
						<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
							查看更多
							<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
						</a>
					</button>
				</div>

				{/* 文章列表 */}
				<div className="space-y-1  h-[750px] overflow-hidden hover:overflow-auto scroll-container">
					{articles.map((article, index) => (
						<div key={index} className="flex items-center space-x-3 pb-4">
							{/* 左侧竖线和日期 */}
							<div className="flex items-center space-x-3">
								<div className="w-[0.7px] h-13 bg-white ml-3"></div>
								<div className="text-center">
									<div className="text-white text-3xl font-bold">{article.date.month}</div>
									<div className="text-gray-300 text-sm">{article.date.day}</div>
								</div>
							</div>
							{/* 右侧文章内容 */}
							<div className="flex-1">
								<p className="text-[13px]  text-white ">
									{article.title}
									<a href="#" className="text-red-600 text-sm hover:font-bold">
										【MORE】
									</a>
								</p>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
  );
};