// components/common/PromoBanner.jsx
"use client";
import { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, EffectFade } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";

export default function PromoBanner() {
	const [banners, setBanners] = useState([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		fetch("/api/banners")
			.then((res) => res.json())
			.then((data) => setBanners(data.banners || []))
			.catch(() => {})
			.finally(() => setLoading(false));
	}, []);

	if (loading || banners.length === 0) return null;

	return (
		<div
			style={{
				width: "100%",
				marginTop: 10,
                    marginBottom: 10, 
				borderRadius: 14,
				overflow: "hidden",
				position: "relative",
			}}>
			<style>{`
                .promo-swiper .swiper-pagination {
                    bottom: 10px;
                }
                .promo-swiper .swiper-pagination-bullet {
                    width: 6px;
                    height: 6px;
                    opacity: 1;
                    transition: all 0.3s;
                }
                .promo-swiper .swiper-pagination-bullet-active {
                    background: #fff;
                    width: 20px;
                    border-radius: 3px;
                }
                .promo-slide-img {
                    width: 100%;
                    height: 180px;
                    object-fit: cover;
                    display: block;
                    transition: transform 0.4s ease;
                }
                @media (max-width: 768px) {
                    .promo-slide-img { height: 120px; }
                }
            `}</style>

			<Swiper
				className='promo-swiper'
				modules={[Autoplay, Pagination, EffectFade]}
				effect='fade'
				autoplay={{ delay: 4000, disableOnInteraction: false }}
				pagination={{ clickable: true }}
				loop={banners.length > 1}
				speed={800}>
				{banners.map((banner, i) => (
					<SwiperSlide key={banner.id || i}>
						<div style={{ position: "relative" }}>
							<img
								src={banner.url}
								alt={banner.title || `Banner ${i + 1}`}
								className='promo-slide-img'
                                        style={{ objectFit: 'contain', backgroundColor: 'transparent'}}
							/>
							{/* Overlay gradient subtire jos pentru paginatie */}
							<div
								style={{
									position: "absolute",
									bottom: 0,
									left: 0,
									right: 0,
									height: 60,
									
									pointerEvents: "none",
								}}
							/>
							
						</div>
					</SwiperSlide>
				))}
			</Swiper>
		</div>
	);
}
