"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";

import "swiper/css";

interface Brand {
  id: number;
  name: string;
  slug: string;
  logo: string;
}

export default function BrandSection() {
  const [brands, setBrands] = useState<Brand[]>([]);

  useEffect(() => {
    fetchBrands();
  }, []);

  const fetchBrands = async () => {
    try {
      const res = await api.get("/brands");
      setBrands(res.data.data || []);
    } catch (err) {
      console.log(err);
    }
  };

  if (!brands.length) return null;

  return (
    <section className="relative py-20 bg-[#f7fff8] overflow-hidden">

        {/* Background decoration */}
        <div className="absolute top-0 left-0 w-72 h-72 bg-green-100 rounded-full blur-3xl opacity-40" />
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-green-50 rounded-full blur-3xl opacity-60" />

        <div className="max-w-7xl mx-auto px-4 relative z-10">

        {/* Heading */}
        <div className="text-center mb-14">

            <div className="inline-flex items-center px-4 py-2 rounded-full bg-green-100 text-green-700 text-sm font-bold mb-5">
            Trusted Brands
            </div>

            <h2 className="text-4xl md:text-5xl font-black text-slate-900">
            Shop By Brands
            </h2>

            <p className="text-slate-500 mt-4 max-w-2xl mx-auto">
            Discover products from the world's most trusted and popular brands.
            </p>

        </div>

        {/* Brand Slider */}
        <Swiper
            modules={[Autoplay]}
            spaceBetween={24}
            slidesPerView={2}
            loop={brands.length > 6}
            grabCursor={true}
            speed={6000}
            autoplay={{
            delay: 0,
            disableOnInteraction: false,
            }}
            breakpoints={{
            640: {
                slidesPerView: 3,
            },
            768: {
                slidesPerView: 4,
            },
            1024: {
                slidesPerView: 6,
            },
            }}
        >
            {brands.map((brand) => (
            <SwiperSlide key={brand.id}>
                <Link href={`/brands/${brand.slug}`}>

                <div
                    className="
                    group
                    bg-white
                    rounded-3xl
                    border border-green-100
                    h-[170px]
                    flex flex-col
                    items-center
                    justify-center
                    p-6
                    shadow-sm
                    hover:shadow-2xl
                    hover:-translate-y-2
                    transition-all
                    duration-300
                    "
                >

                    <img
                    src={brand.logo}
                    alt={brand.name}
                    className="
                        h-16
                        object-contain
                        transition
                        duration-300
                        group-hover:scale-110
                    "
                    />

                    <div className="mt-5 text-center">

                    <h3 className="font-bold text-slate-800 text-sm">
                        {brand.name}
                    </h3>

                    <span className="text-xs text-green-600 font-medium">
                        View Collection
                    </span>

                    </div>

                </div>

                </Link>
            </SwiperSlide>
            ))}
        </Swiper>

        </div>
    </section>
    );
}