'use client';

import { motion } from 'framer-motion';
import { ImageIcon, Eye, EyeOff, Layers } from 'lucide-react';

interface GalleryStatsProps {
	totalImages: number;
	activeImages: number;
	inactiveImages: number;
	sectionCounts: Record<string, number>;
	priorityCounts: Record<string, number>;
}

export function GalleryStats({
	totalImages,
	activeImages,
	inactiveImages,
	sectionCounts,
}: GalleryStatsProps) {
	const statsCards = [
		{
			title: 'Total Images',
			value: totalImages,
			icon: ImageIcon,
		},
		{
			title: 'Active Images',
			value: activeImages,
			icon: Eye,
		},
		{
			title: 'Inactive Images',
			value: inactiveImages,
			icon: EyeOff,
		},
		{
			title: 'Sections',
			value: Object.keys(sectionCounts).length,
			icon: Layers,
		},
	];

	return (
		<div className="space-y-6">
			{/* Main Stats Cards */}
			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
				{statsCards.map((stat, index) => {
					const Icon = stat.icon;

					return (
						<motion.div
							key={stat.title}
							initial={{ opacity: 0, y: 20 }}
							animate={{ opacity: 1, y: 0 }}
							transition={{ delay: index * 0.1 }}
							className="p-5 rounded-xl relative overflow-hidden group"
							style={{
								backgroundColor: '#1F1B16',
								border: '1px solid rgba(203,178,106,0.15)',
								boxShadow:
									'0 8px 20px -6px rgba(0,0,0,0.5), 0 0 0 1px rgba(203,178,106,0.05) inset',
							}}
						>
							{/* Gold hover line */}
							<div className="absolute top-0 left-0 w-full h-[2px] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700" />

							<div className="flex items-start justify-between">
								<div>
									<p className="font-inter text-xs uppercase tracking-wider text-[#CBB26A]/70">
										{stat.title}
									</p>

									<p className="font-playfair text-3xl font-bold mt-2 text-[#E5D9C6]">
										{stat.value}
									</p>
								</div>

								<div className="w-10 h-10 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
									<Icon className="w-5 h-5 text-[#CBB26A]" />
								</div>
							</div>
						</motion.div>
					);
				})}
			</div>

			{/* Section Distribution */}
		</div>
	);
}