// SwiperComponent.jsx
'use client';

import { useRef } from 'react';
import Image from "next/image";
import Heading from "../../atoms/Heading";
import { FaTag, FaClock, FaArrowRight } from "react-icons/fa";
import { Zap } from 'lucide-react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay } from 'swiper/modules';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/autoplay';
import Link from 'next/link';

export default function SwiperComponent({ blogs, router, formatDate, calculateReadTime }) {
  const navigationPrevRef = useRef(null);
  const navigationNextRef = useRef(null);

  return (
    <>
      <Swiper
        modules={[Navigation, Autoplay]}
        spaceBetween={30}
        slidesPerView={1}
        autoplay={{ 
          delay: 5000,
          disableOnInteraction: false,
        }}
        navigation={{
          prevEl: navigationPrevRef.current,
          nextEl: navigationNextRef.current,
        }}
        breakpoints={{ 
          640: { 
            slidesPerView: 1.2,
            spaceBetween: 20 
          },
          768: { 
            slidesPerView: 2.2,
            spaceBetween: 25 
          }, 
          1024: { 
            slidesPerView: 3,
            spaceBetween: 30 
          } 
        }}
        className="pb-12"
        onInit={(swiper) => {
          swiper.params.navigation.prevEl = navigationPrevRef.current;
          swiper.params.navigation.nextEl = navigationNextRef.current;
          swiper.navigation.init();
          swiper.navigation.update();
        }}
      >
        {blogs.map((blog) => (
          <SwiperSlide key={blog.id} className="h-auto">
            <Link href={`/${blog.slug}`}><div 
              className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden cursor-pointer border border-gray-100 hover:border-teal-200 relative h-full flex flex-col"
            >
              {/* Featured Badge */}
              {blog.featured && (
                <div className="absolute top-4 right-4 z-10">
                  <div className="bg-linear-to-r from-amber-500 to-orange-500 text-white text-xs font-bold px-3 py-1.5 rounded-full flex items-center gap-1">
                    <Zap className="w-3 h-3" />
                    Featured
                  </div>
                </div>
              )}

              {/* Image Container */}
              <div className="relative h-48 overflow-hidden bg-linear-to-br from-teal-50 to-blue-50 shrink-0">
                <Image
                  src={
                    blog.image
                      ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${blog.image.replace(/^\/+/, "")}`
                      : "/assets/default-article.webp"
                  }
                  alt={blog.title || "Blog image"}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-500"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                />
                <div className="absolute inset-0 bg-linear-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                
                {/* Category Overlay */}
                <div className="absolute top-4 left-4">
                  <div className="bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full flex items-center gap-2">
                    <FaTag className="w-3 h-3 text-teal-600" />
                    <span className="text-xs font-semibold text-gray-800">
                      {blog.category?.name || 'Education'}
                    </span>
                  </div>
                </div>
              </div>
              
              {/* Content */}
              <div className="p-6 flex flex-col grow">
                <div className="mb-3">
                  <span className="text-xs font-semibold text-teal-600 uppercase tracking-wider">
                    Study Abroad
                  </span>
                </div>
                
                <Heading level={4} className="text-lg font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-teal-600 transition-colors">
                  {blog.title}
                </Heading>
                
                <p className="text-gray-600 text-sm line-clamp-3 mb-4 leading-relaxed grow">
                  {blog.short_description}
                </p>
                
                <div className="flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-100 mt-auto">
                  <div className="flex items-center gap-3">
                    <div className="flex items-center gap-1">
                      <FaClock className="w-3 h-3 text-teal-500" />
                      <span>{calculateReadTime(blog.description)} min</span>
                    </div>
                    <div className="h-1 w-1 rounded-full bg-gray-300"></div>
                    <span>{formatDate(blog.created_at)}</span>
                  </div>
                  <div className="text-teal-600 group-hover:translate-x-1 transition-transform">
                    <FaArrowRight className="w-4 h-4" />
                  </div>
                </div>
              </div>
            </div></Link>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* Custom Navigation Buttons */}
      <div className="flex justify-center gap-4 mt-8">
        <button
          ref={navigationPrevRef}
          className="interest-prev w-12 h-12 rounded-xl bg-linear-to-r from-teal-600 to-blue-500 text-white flex items-center justify-center hover:shadow-lg hover:scale-105 transition-all duration-300"
          aria-label="Previous slide"
        >
          ←
        </button>
        <button
          ref={navigationNextRef}
          className="interest-next w-12 h-12 rounded-xl bg-linear-to-r from-teal-600 to-blue-500 text-white flex items-center justify-center hover:shadow-lg hover:scale-105 transition-all duration-300"
          aria-label="Next slide"
        >
          →
        </button>
      </div>
    </>
  );
}