const events = [
  {
    month: "Nov",
    day: "12",
    title: "Open Campus Day",
    time: "09:00 AM - 04:00 PM",
  },
  {
    month: "Nov",
    day: "18",
    title: "Guest Lecture: Future of AI in Arts",
    time: "06:00 PM - Main Hall",
  },
];

export default function UpcomingEvents() {
  return (
    <div className="bg-white rounded-xl border border-ui-border shadow-soft p-6">
      <div className="blog-widget-title font-bold text-ui-text mb-6 pb-4 border-b border-ui-border">
        Upcoming Events
      </div>
      <ul className="space-y-4">
        {events.map((e) => (
          <li key={e.title} className="flex gap-4">
            <div className="flex flex-col items-center justify-center w-12 h-12 bg-brand-light rounded-lg border border-brand-blue/20 shrink-0">
              <span className="text-xs font-bold text-brand-blue uppercase">{e.month}</span>
              <span className="text-lg font-bold text-ui-text leading-none">{e.day}</span>
            </div>
            <div>
              <div className="text-sm font-bold text-ui-text hover:text-brand-blue cursor-pointer transition-colors">{e.title}</div>
              <p className="text-xs text-ui-muted mt-1">
                <i className="far fa-clock mr-1"></i>{e.time}
              </p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}