import { CalendarDays, Clock } from "lucide-react";
import { Link } from "react-router-dom";

const mockEvents = [
  {
    title: "Heimspiel Herren 1 vs. TSG Nußloch 5",
    date: "2025-06-08",
    location: "Bergstraßenhalle Laudenbach",
  },
  {
    title: "Sommerfest der Abteilung",
    date: "2025-06-15",
    location: "Vereinsheim",
  },
  {
    title: "Training Jugend U16",
    date: "2025-06-17",
    location: "Halle 2",
  },
];

const EventsSection = () => {
  const getDaysUntil = (dateStr: string) => {
    const today = new Date();
    const target = new Date(dateStr);
    const diffTime = target.getTime() - today.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
  };

  return (
    <section className="bg-gray-50 py-12" id="events">
      <div className="section-container text-center">
        <h2 className="text-2xl md:text-3xl font-bold mb-4 flex justify-center items-center gap-2">
        
          Kommende Events
        </h2>
        <p className="text-gray-600 mb-6 text-sm md:text-base">
          Spieltage & Events im Überblick
        </p>

        <div className="flex flex-wrap justify-center gap-4">
        {mockEvents.map((event, i) => {
            const daysLeft = getDaysUntil(event.date);
            return (
            <div
                key={i}
                className="bg-white shadow-sm rounded-xl p-4 text-left border border-gray-200 text-sm w-[280px]"
            >
                <p className="text-gray-500 text-xs mb-1">
                📅 {new Date(event.date).toLocaleDateString("de-DE")}
                </p>
                <h3 className="font-semibold text-base">{event.title}</h3>
                <p className="text-gray-600 text-sm mb-1">{event.location}</p>
                <div className="flex items-center gap-1 text-primary text-xs mt-2">
                <Clock className="w-4 h-4" />
                {daysLeft > 0
                    ? `Noch ${daysLeft} Tag${daysLeft > 1 ? "e" : ""}`
                    : daysLeft === 0
                    ? "Heute!"
                    : "Bereits vorbei"}
                </div>
            </div>
            );
        })}
        </div>


        <div className="mt-8">
          <Link
            to="/events"
            className="inline-block bg-primary text-white text-sm py-2 px-4 rounded-lg hover:bg-primary/90 transition"
          >
            Zum Eventkalender
          </Link>
        </div>
      </div>
    </section>
  );
};

export default EventsSection;
