'use client'

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';
import Image from 'next/image';
import 'swiper/css';
import 'swiper/css/pagination';
import testImage from '@/app/src/image-preview.png'
import { useRef } from 'react';

export default function ViolationsCarousel() {
	const paginationRef = useRef(null);

	return (
		<div className="content-section">
			<div className="section-header">
				<h3 className="section-title">Нарушения</h3>
				<a href="pages/violations.php" className="view-all-link">Смотреть все →</a>
			</div>
			<div className="violations-carousel">
				<Swiper
					spaceBetween={50}
					slidesPerView={1}
					modules={[Pagination, Autoplay]}
					pagination={{
						/* dynamicBullets: true, */
						/* el: paginationRef.current, */
						clickable: true,
						el: '.custon-swiper-pagination'
					}}
					loop={true}
					autoplay={{
						delay: 3000,
						disableOnInteraction: false,
					}}
				/* width={300} */
				>
					<SwiperSlide>
						<div className="violation-slide">
							<div className="violation-image-container">
								<Image src={testImage} alt="Preview" className="violation-image" />
								<div className="violation-badge">НАРУШЕНИЕ</div>
								<div className="violation-status-badge">ОБРАБОТАНО</div>
							</div>

							<div className="violation-content">
								<div className="violation-title-row">
									<div className="violation-filename">
										🖼️banner111.png</div>
									<div className="violation-type-badge photo">
										Фото
									</div>
								</div>

								<div className="violation-info-grid">
									<div className="violation-info-item">
										<div className="violation-info-label">
											🌍 Регион
										</div>
										<div className="violation-info-value">
											<span className="region-flag">🇺🇸</span>
											<span>США</span>
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📅 Обнаружено</div>
										<div className="violation-info-value">
											17.10.2025</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">🌐 Домен</div>
										<div className="violation-info-value">
											m.apkpure.com    </div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📊 Категория</div>
										<div className="violation-info-value">
											Единичное
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📁 Тип</div>
										<div className="violation-info-value">
											Изображение</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">⚡ Статус</div>
										<div className="violation-info-value">
											✅ Обработано</div>
									</div>
								</div>

								<div className="violation-actions-row">
									<button className="btn-visit-site">
										🔗 Перейти на сайт
									</button>
									<button className="violation-action">
										🚨 Открыть дело
									</button>
								</div>
							</div>
						</div>
					</SwiperSlide>
					<SwiperSlide>
						<div className="violation-slide">
							<div className="violation-image-container">
								<Image src={testImage} alt="Preview" className="violation-image" />

								<div className="violation-badge">НАРУШЕНИЕ</div>
								<div className="violation-status-badge">ОБРАБОТАНО</div>
							</div>

							<div className="violation-content">
								<div className="violation-title-row">
									<div className="violation-filename">
										🖼️banner111.png</div>
									<div className="violation-type-badge photo">
										Фото
									</div>
								</div>

								<div className="violation-info-grid">
									<div className="violation-info-item">
										<div className="violation-info-label">
											🌍 Регион
										</div>
										<div className="violation-info-value">
											<span className="region-flag">🇺🇸</span>
											<span>США</span>
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📅 Обнаружено</div>
										<div className="violation-info-value">
											17.10.2025</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">🌐 Домен</div>
										<div className="violation-info-value">
											m.apkpure.com    </div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📊 Категория</div>
										<div className="violation-info-value">
											Единичное
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📁 Тип</div>
										<div className="violation-info-value">
											Изображение</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">⚡ Статус</div>
										<div className="violation-info-value">
											✅ Обработано</div>
									</div>
								</div>

								<div className="violation-actions-row">
									<button className="btn-visit-site">
										🔗 Перейти на сайт
									</button>
									<button className="violation-action">
										🚨 Открыть дело
									</button>
								</div>
							</div>
						</div>
					</SwiperSlide>
					<SwiperSlide>
						<div className="violation-slide">
							<div className="violation-image-container">
								<Image src={testImage} alt="Preview" className="violation-image" />

								<div className="violation-badge">НАРУШЕНИЕ</div>
								<div className="violation-status-badge">ОБРАБОТАНО</div>
							</div>

							<div className="violation-content">
								<div className="violation-title-row">
									<div className="violation-filename">
										🖼️banner111.png</div>
									<div className="violation-type-badge photo">
										Фото
									</div>
								</div>

								<div className="violation-info-grid">
									<div className="violation-info-item">
										<div className="violation-info-label">
											🌍 Регион
										</div>
										<div className="violation-info-value">
											<span className="region-flag">🇺🇸</span>
											<span>США</span>
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📅 Обнаружено</div>
										<div className="violation-info-value">
											17.10.2025</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">🌐 Домен</div>
										<div className="violation-info-value">
											m.apkpure.com    </div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📊 Категория</div>
										<div className="violation-info-value">
											Единичное
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📁 Тип</div>
										<div className="violation-info-value">
											Изображение</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">⚡ Статус</div>
										<div className="violation-info-value">
											✅ Обработано</div>
									</div>
								</div>

								<div className="violation-actions-row">
									<button className="btn-visit-site">
										🔗 Перейти на сайт
									</button>
									<button className="violation-action">
										🚨 Открыть дело
									</button>
								</div>
							</div>
						</div>
					</SwiperSlide>
				</Swiper>
				<div
					className="flex justify-center mt-6"
				>
					<div
						ref={paginationRef}
						className="flex justify-center gap-2 custon-swiper-pagination"
					>
					</div>
				</div>
			</div>
		</div>
	)
}