import { ContactStats } from '@/types';
import { motion } from 'framer-motion';
import {
	Mail,
	Inbox,
	Sparkles,
	Clock,
	CheckCircle,
	Archive,
} from 'lucide-react';

interface Props {
	stats?: ContactStats;
}

const StatsCards = ({ stats }: Props) => {
	if (!stats) return null;

	const cards = [
		{ label: 'Total', value: stats.totalMessages, icon: Mail },
		{ label: 'Unread', value: stats.unreadCount, icon: Inbox },
		{ label: 'New', value: stats.newCount, icon: Sparkles },
		{ label: 'In Progress', value: stats.inProgressCount, icon: Clock },
		{ label: 'Responded', value: stats.respondedCount, icon: CheckCircle },
		{ label: 'Archived', value: stats.archivedCount, icon: Archive },
	];

	return (
		<motion.div
			initial={{ opacity: 0, y: 20 }}
			animate={{ opacity: 1, y: 0 }}
			transition={{ duration: 0.6, delay: 0.1 }}
			className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12"
		>
			{cards.map((stat, i) => {
				const Icon = stat.icon;

				return (
					<motion.div
						key={i}
						whileHover={{ y: -4 }}
						transition={{ type: 'spring', stiffness: 300, damping: 20 }}
						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 scale-x-0 group-hover:scale-x-100 transition-transform duration-700" />

						<div className="relative z-10 flex flex-col gap-3 items-start justify-between">
							<div>
								<p className="font-inter text-xs uppercase tracking-wider text-[#CBB26A]/70 mb-2">
									{stat.label}
								</p>

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

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

export default StatsCards;