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

interface Activity {
  id: number | string;
  image: string;
  title: string;
  description: string;
  badge?: string | null;
}

interface ActivitiesGridProps {
  activities: Activity[];
  lang: string;
}

export default function ActivitiesGrid({ activities, lang }: ActivitiesGridProps) {
  return (
    <section className="py-28 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
          <div>
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
              {lang === "en" ? "What Will You Do?" : "Ne Yapacaksınız?"}
            </span>
            <h2 className="font-serif text-5xl font-bold text-dark">
              {lang === "en" ? "Activities" : "Aktiviteler"}
            </h2>
          </div>
          <Link
            href={`/${lang}/aktiviteler`}
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
          >
            {lang === "en" ? "See All" : "Tümünü Gör"} <ArrowRight className="w-4 h-4" />
          </Link>
        </ScrollReveal>

        {/* Single Row 3 Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {activities.length > 0 ? (
            activities.map((act, i) => (
              <ScrollReveal
                key={act.id}
                delay={i * 50}
              >
                <Link href={`/${lang}/aktiviteler`} className={`group relative block rounded-3xl overflow-hidden h-[400px]`}>
                  <Image
                    src={act.image}
                    alt={act.title}
                    fill
                    sizes="(max-width: 768px) 100vw, 33vw"
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className={`absolute inset-0 bg-gradient-to-t from-dark/90 via-dark/30 to-transparent`} />
                  <div className={`absolute bottom-0 p-8 flex flex-col justify-end h-full`}>
                    {act.badge && (
                      <span className="block text-accent text-[10px] tracking-[0.25em] uppercase font-bold mb-3">{act.badge}</span>
                    )}
                    <h3 className={`font-serif text-white font-bold mb-3 text-3xl`}>{act.title}</h3>
                    <p className="text-white/70 text-sm mb-4 max-w-xs line-clamp-3">
                      {act.description}
                    </p>
                    <span className="inline-flex items-center gap-2 text-white text-sm font-semibold hover:text-accent transition-colors mt-auto opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 duration-400">
                      <ArrowRight className="w-4 h-4" />
                    </span>
                  </div>
                </Link>
              </ScrollReveal>
            ))
          ) : (
            <div className="md:col-span-3 py-10 text-center text-gray-500">
              {lang === "en" ? "No activities added yet." : "Henüz aktivite eklenmedi."}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}