import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

interface Event {
  id: number | string;
  image: string;
  title: string;
  description: string;
  badge?: string | null;
  date: string;
  time: string;
  location: string;
}

interface EventsPreviewProps {
  events: Event[];
  lang: string;
}

export default function EventsPreview({ events, lang }: EventsPreviewProps) {
  return (
    <section className="py-28 bg-dark text-white relative overflow-hidden">
      {/* Background glow */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-[120px] pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[150px] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
          <div>
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
              {lang === "en" ? "Calendar" : "Takvim"}
            </span>
            <h2 className="font-serif text-5xl font-bold">
              {lang === "en" ? "Events" : "Etkinlikler"}
            </h2>
          </div>
          <Link
            href={`/${lang}/etkinlikler`}
            className="inline-flex items-center gap-2 text-sm font-semibold text-white/70 hover:text-white transition-colors border border-white/20 hover:border-white px-6 py-2.5 rounded-full"
          >
            {lang === "en" ? "All Events" : "Tüm Etkinlikler"} <ArrowRight className="w-4 h-4" />
          </Link>
        </ScrollReveal>

        <ScrollReveal delay={100}>
          {events.length > 0 ? (
            events.map((ev) => (
              <div key={ev.id} className="group relative flex flex-col md:flex-row gap-8 bg-white/5 border border-white/10 rounded-3xl p-6 md:p-10 hover:bg-white/10 transition-colors backdrop-blur-sm mb-6">
                <div className="relative w-full md:w-1/3 h-[250px] md:h-auto rounded-2xl overflow-hidden shrink-0">
                  <Image
                    src={ev.image}
                    alt={ev.title}
                    fill
                    sizes="(max-width: 768px) 100vw, 33vw"
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                </div>
                <div className="flex flex-col justify-center w-full md:w-2/3">
                  {ev.badge && (
                    <div className="inline-block bg-accent/20 text-accent text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase mb-4 w-max">
                      {ev.badge}
                    </div>
                  )}
                  <h3 className="font-serif text-3xl md:text-4xl font-bold mb-4">{ev.title}</h3>
                  <p className="text-white/60 leading-relaxed mb-6 max-w-xl">
                    {ev.description}
                  </p>
                  <div className="flex flex-wrap items-center gap-6 mb-8 text-sm text-white/80">
                    <span className="flex items-center gap-2">
                      <span className="w-2 h-2 rounded-full bg-accent" /> {ev.date}
                    </span>
                    <span className="flex items-center gap-2">
                      <span className="w-2 h-2 rounded-full bg-accent" /> {ev.time}
                    </span>
                    <span className="flex items-center gap-2">
                      <span className="w-2 h-2 rounded-full bg-accent" /> {ev.location}
                    </span>
                  </div>
                  <Link
                    href={`/${lang}/etkinlikler`}
                    className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase text-accent hover:text-white transition-colors w-max"
                  >
                    {lang === "en" ? "View Details" : "Detayları İncele"} <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>
              </div>
            ))
          ) : (
            <div className="py-10 text-center text-white/50">
              {lang === "en" ? "No events added yet." : "Henüz etkinlik eklenmedi."}
            </div>
          )}
        </ScrollReveal>
      </div>
    </section>
  );
}