import Link from '@/core/components/elements/Link/Link';
import { useEffect, useState } from 'react';
import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';

const BannerSection = () => {
  const [privateBrandData, setPrivateBrandData] = useState([]);
  const [homeBannerData, setHomeBannerData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { isMobile, isDesktop } = useDevice();
  useEffect(() => {
    const fetchAllBanners = async () => {
      try {
        // Fetch private brand banners
        const privateBrandRes = await fetch(
          '/api/banner-section?type=private-brand'
        );
        if (privateBrandRes.ok) {
          const privateBrandResult = await privateBrandRes.json();
          setPrivateBrandData(privateBrandResult.data || []);
        }

        // Fetch home banners
        const homeBannerRes = await fetch(
          '/api/banner-section?type=home-banner'
        );
        if (homeBannerRes.ok) {
          const homeBannerResult = await homeBannerRes.json();
          setHomeBannerData(homeBannerResult.data || []);
        }
      } catch (err) {
        setError('Network error');
      } finally {
        setLoading(false);
      }
    };

    fetchAllBanners();
  }, []);

  // if (loading) return <div>Loading...</div>;
  // if (error) return <div>Error: {error}</div>;

  return (
    <div className='space-y-12'>
      {/* Private Brand Section */}
      {privateBrandData && privateBrandData.length > 0 && (
        <div className='px-4 sm:px-0'>
          <div
            className='text-black font-semibold sm:text-h-lg mb-6'
            id='private-brand'
          >
            Private Brand
          </div>

          {/* Desktop Grid View */}
          {isDesktop && (
            <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'>
              {privateBrandData.map((banner, index) => (
                <Link key={banner.id || index} href={banner.url || '#'}>
                  <img
                    width={439}
                    height={150}
                    quality={85}
                    src={banner.image}
                    alt={banner.name || `Private Brand Banner ${index + 1}`}
                    className='rounded hover:scale-105 transition duration-500 ease-in-out'
                    loading='eager'
                  />
                </Link>
              ))}
            </div>
          )}

          {/* Mobile Swiper View */}
          {isMobile && (
            <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
              {privateBrandData.map((banner, index) => (
                <SwiperSlide key={banner.id || index}>
                  <Link href={banner.url || '#'}>
                    <img
                      width={350}
                      height={100}
                      quality={70}
                      src={banner.image}
                      alt={banner.name || `Private Brand Banner ${index + 1}`}
                      className='rounded'
                      loading='eager'
                    />
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
          )}
        </div>
      )}

      {/* Home Banner Section */}
      {homeBannerData && homeBannerData.length > 0 && (
        <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
          {homeBannerData.map((banner, index) => (
            <div key={banner.id || index} className='relative'>
              <Link href={banner.url || '#'}>
                <img
                  width={1024}
                  height={512}
                  quality={85}
                  src={banner.image}
                  alt={banner.name || `Home Banner ${index + 1}`}
                  // className='h-40 w-full rounded object-cover transition-transform hover:scale-105'
                  className='h-auto w-full rounded'
                  loading='eager'
                  onError={(e) => {
                    e.target.style.display = 'none';
                  }}
                />
              </Link>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default BannerSection;