"use client";

import { motion } from "framer-motion";
import { Instagram } from "@/components/InstagramIcon";

type InstaPost = {
  id: string;
  imageUrl: string;
  url: string;
  caption: string;
};

export default function InstagramFeed({ posts }: { posts: InstaPost[] }) {
  if (!posts || posts.length === 0) {
    return null; // Eğer post yoksa veya API hata verdiyse gizle
  }

  return (
    <section className="py-24 bg-charcoal text-white relative overflow-hidden">
      <div className="container mx-auto px-6 lg:px-12">
        <div className="flex flex-col items-center justify-center mb-16 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="flex items-center gap-4 mb-4"
          >
            <div className="p-4 bg-gradient-to-tr from-[#f09433] via-[#dc2743] to-[#bc1888] rounded-2xl shadow-lg">
              <Instagram size={28} className="text-white" />
            </div>
            <h2 className="font-heading text-4xl md:text-5xl font-black">
              @kozmosbeach
            </h2>
          </motion.div>
          <motion.p 
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-white/60 text-lg max-w-xl"
          >
            Bizi Instagram'da takip edin, en yeni etkinliklerden ve plajımızdaki harika anlardan anında haberdar olun.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {posts.map((post, i) => (
            <motion.a
              href={post.url}
              target="_blank"
              rel="noopener noreferrer"
              key={post.id || i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="group relative aspect-[4/5] rounded-2xl overflow-hidden bg-gray-900 border border-white/10 block"
            >
              {/* Instagram image is loaded via img instead of next/image to avoid domain config issues with FB/IG CDNs */}
              {post.imageUrl ? (
                <img 
                  src={post.imageUrl} 
                  alt={post.caption || "Instagram Post"} 
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center bg-gray-800">
                  <Instagram size={32} className="text-white/20" />
                </div>
              )}
              
              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
                <Instagram size={32} className="text-white mb-3" />
              </div>
            </motion.a>
          ))}
        </div>

        <div className="mt-16 text-center">
          <a 
            href="https://instagram.com/kozmosbeach" 
            target="_blank" 
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-8 py-4 bg-white text-charcoal rounded-xl font-bold hover:bg-turquoise hover:text-white transition-colors duration-300"
          >
            <Instagram size={20} />
            Daha Fazlası İçin Takip Et
          </a>
        </div>
      </div>
    </section>
  );
}