import { motion } from "framer-motion";

export const EmptyStateIllustration = () => {
    return (
        <motion.svg
            width="240"
            height="200"
            viewBox="0 0 240 200"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
        >
            {/* Background Elements */}
            <motion.path
                d="M40 100C40 60 60 20 120 20C180 20 200 60 200 100C200 140 180 180 120 180C60 180 40 140 40 100Z"
                fill="#F3F4F6"
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
            />

            {/* Books Stack */}
            <motion.g
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.5, delay: 0.4 }}
            >
                {/* Bottom Book */}
                <path
                    d="M90 120H150C152.761 120 155 117.761 155 115V105C155 102.239 152.761 100 150 100H90C87.2386 100 85 102.239 85 105V115C85 117.761 87.2386 120 90 120Z"
                    fill="#E0E7FF"
                />
                {/* Middle Book */}
                <path
                    d="M95 100H155C157.761 100 160 97.7614 160 95V85C160 82.2386 157.761 80 155 80H95C92.2386 80 90 82.2386 90 85V95C90 97.7614 92.2386 100 95 100Z"
                    fill="#818CF8"
                />
                {/* Top Book */}
                <path
                    d="M100 80H160C162.761 80 165 77.7614 165 75V65C165 62.2386 162.761 60 160 60H100C97.2386 60 95 62.2386 95 65V75C95 77.7614 97.2386 80 100 80Z"
                    fill="#6366F1"
                />
            </motion.g>

            {/* Floating Elements */}
            <motion.g
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.5, delay: 0.6 }}
            >
                {/* Small Circles */}
                <circle cx="70" cy="60" r="4" fill="#C7D2FE" />
                <circle cx="180" cy="140" r="6" fill="#818CF8" />
                <circle cx="160" cy="40" r="5" fill="#6366F1" />
                <circle cx="60" cy="140" r="5" fill="#E0E7FF" />
            </motion.g>

            {/* Decorative Lines */}
            <motion.g
                stroke="#C7D2FE"
                strokeWidth="2"
                strokeLinecap="round"
                initial={{ pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: 1, delay: 0.8 }}
            >
                <line x1="40" y1="80" x2="60" y2="80" />
                <line x1="180" y1="120" x2="200" y2="120" />
                <line x1="160" y1="160" x2="180" y2="160" />
            </motion.g>
        </motion.svg>
    );
};