import { ArrowRight, Camera } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

interface InstagramFeedProps {
  instagramPosts: any[];
  lang: string;
}

export default function InstagramFeed({ instagramPosts, lang }: InstagramFeedProps) {
  if (!instagramPosts || instagramPosts.length === 0) {
    return null;
  }

  return (
    <section className="py-28 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <ScrollReveal className="text-center mb-16">
          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
            @kitebeachakyaka
          </span>
          <h2 className="font-serif text-5xl font-bold text-dark">Instagram</h2>
        </ScrollReveal>

        <ScrollReveal stagger className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
          {instagramPosts.map((post: any) => (
            <a
              key={post.id}
              href={`https://instagram.com/p/${post.code}`}
              target="_blank"
              rel="noreferrer"
              className="group block relative rounded-2xl overflow-hidden aspect-[4/5] border border-sand"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={post.image_versions2?.candidates[0]?.url}
                alt={post.caption?.text?.substring(0, 100) || "Instagram post"}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div className="absolute inset-0 bg-dark/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-white p-6 text-center">
                <Camera className="w-8 h-8 mb-3" />
                <p className="text-xs line-clamp-3">
                  {post.caption?.text}
                </p>
              </div>
            </a>
          ))}
        </ScrollReveal>

        <div className="text-center mt-12">
          <a
            href="https://instagram.com/kitebeachakyaka"
            target="_blank"
            rel="noreferrer"
            className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
          >
            {lang === "en" ? "Follow Us" : "Bizi Takip Edin"}
            <ArrowRight className="w-3.5 h-3.5" />
          </a>
        </div>
      </div>
    </section>
  );
}