// app/news/page.tsx
"use client"

import React, { useState } from "react"
import Link from "next/link"
import { Pagination } from "antd"  // 引入 Ant Design 分页器
import "antd/dist/reset.css"
import MainTitle from "@/components/MainTitle";
import Image from "next/image";       // 确保全局引入 antd 样式（一般在 layout.tsx 中引入一次即可）

export default function NewsPage() {
  const newsList = [
    {
      id: 1,
      title: "喜讯|中科盛阳荣获长沙市人工智能应用示范 资金项目支持",
      date: "2025-07-15",
      desc: "近日，长沙市工业和信息化局正式公布2024年人工智能应用示范奖励资金项目名单，中科盛阳信息技术有限公司凭借“园区多源信息融合智慧管理平台研发及应用示范”项目成功入选，成为长沙市推动智慧园区建设的标杆企业。",
      hasImage: true,
    },
    {
      id: 2,
      title: "中科盛阳信息技术有限公司博士后创新创业实践...",
      date: "2024-09-03",
    },
    {
      id: 3,
      title: "人大代表聚力赋能，携手中科盛阳共绘发展新蓝图",
      date: "2024-11-08",
    },
    {
      id: 4,
      title: "中科盛阳自主研发传感设备取得重大突破，荣获...",
      date: "2023-11-18",
    },
    {
      id: 5,
      title: "创新引领安全新篇章——中科盛阳荣获“一种基...",
      date: "2024-03-15",
    },
    {
      id: 6,
      title: "中科盛阳信息技术有限公司荣获“双软认定”，彰...",
      date: "2024-03-20",
    },
    {
      id: 7,
      title: "标题：中科盛阳荣膺2024年湖南省“专精特新”...",
      date: "2024-04-26",
    },
  ]

  const [currentPage, setCurrentPage] = useState(1)
  const pageSize = 6
  const totalNews = newsList.length - 1

  const pagedNews = newsList
    .slice(1)
    .slice((currentPage - 1) * pageSize, currentPage * pageSize)

  return (
    <>
      <div>
        <Image src={"/assets/news/1.png"} alt={"banner"} width={1920} height={1080}/>
      </div>

      <div className="py-6 sm:py-10">
        <MainTitle title={"新闻动态"}/>
      </div>

      <div className="container sm:max-w-9/12 mx-auto p-4 space-y-6">
        {/* 顶部大新闻 */}
        <div className="bg-white rounded-2xl shadow p-6">
          <div className="flex flex-col sm:flex-row gap-6">
            {/* 模拟图片色块 */}
            <div className="w-full sm:w-1/2 bg-gray-300 rounded-lg h-48 sm:h-auto flex items-center justify-center">
              <span className="text-gray-600">图片占位</span>
            </div>
            {/* 右侧文字 */}
            <div className="flex-1 flex flex-col justify-between">
              <div>
                <h2 className="text-lg sm:text-xl font-bold mb-2">{newsList[0].title}</h2>
                <p className="text-gray-500 text-xs sm:text-sm mb-4">{newsList[0].date}</p>
                <p className="text-gray-700 text-sm sm:text-base leading-relaxed line-clamp-4">
                  {newsList[0].desc}
                </p>
              </div>
              <Link href="#" className="text-blue-500 hover:underline mt-4 self-start text-sm sm:text-base">
                了解更多 &gt;
              </Link>
            </div>
          </div>
        </div>

        {/* 下方小新闻卡片 */}
        <div className="grid sm:grid-cols-2 gap-4">
          {pagedNews.map((item) => (
            <div
              key={item.id}
              className="bg-white rounded-2xl shadow p-4 flex flex-col justify-between"
            >
              <div>
                <h3 className="text-sm sm:text-base font-semibold mb-2">{item.title}</h3>
                <p className="text-gray-500 text-xs sm:text-sm">{item.date}</p>
              </div>
              <Link href="#" className="text-blue-500 hover:underline mt-2 self-end text-xs sm:text-sm">
                了解更多 &gt;
              </Link>
            </div>
          ))}
        </div>

        {/* 分页器 */}
        <div className="flex justify-center mt-6">
          <Pagination
            current={currentPage}
            pageSize={pageSize}
            total={totalNews}
            onChange={(page) => setCurrentPage(page)}
            showSizeChanger={false}
          />
        </div>
      </div>
    </>
  )
}
