import NewsCard from "./NewsCard";

const news = [
  {
    category: "Campus",
    date: "Oct 12, 2024",
    title: "New Liberal Arts Library Wing Opens to Students",
    excerpt: "The state-of-the-art facility provides expanded collaborative spaces and access to over 50,000 new digital and print resources for our growing student body.",
    image: "https://storage.googleapis.com/uxpilot-auth.appspot.com/8eafd095d9-314bdad36b2119266084.png",
  },
  {
    category: "Partnerships",
    date: "Oct 10, 2024",
    title: "ULP Announces Strategic Alliance with TechGlobal Institute",
    excerpt: "A new partnership aimed at bridging the gap between liberal arts education and emerging technological paradigms in the 21st century.",
    icon: "fas fa-handshake",
  },
  {
    category: "Events",
    date: "Oct 05, 2024",
    title: "Annual Global Ethics Symposium Draws Record Attendance",
    excerpt: "Scholars from over 40 countries gathered at ULP this weekend to discuss the evolving landscape of international human rights and digital privacy.",
    image: "https://storage.googleapis.com/uxpilot-auth.appspot.com/fc832714d8-ee7527b4d94c300aae71.png",
  },
  {
    category: "Research",
    date: "Sep 28, 2024",
    title: "Department of Sociology Publishes Landmark Study on Urban Migration",
    excerpt: "A comprehensive 5-year study reveals shifting demographic patterns in post-industrial European cities, highlighting new socio-economic challenges.",
    icon: "fas fa-flask",
  },
];

export default function NewsGrid() {
  return (
    <div className="flex-1">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        {news.map((item) => (
          <NewsCard key={item.title} {...item} />
        ))}
      </div>

      {/* Pagination */}
      <div className="flex justify-center items-center gap-2 border-t border-ui-border pt-8">
        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-muted transition-colors disabled:opacity-50" disabled>
          <i className="fas fa-chevron-left"></i>
        </button>
        <button className="pg-btn pg-active w-10 h-10 flex items-center justify-center text-white font-bold">1</button>
        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors font-medium">2</button>
        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors font-medium">3</button>
        <span className="text-ui-muted mx-2">...</span>
        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors font-medium">12</button>
        <button className="pg-btn w-10 h-10 flex items-center justify-center border border-ui-border text-ui-text transition-colors">
          <i className="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
  );
}