import React from 'react';
import { motion } from 'framer-motion';

const PageLoader: React.FC = () => {
    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-stone-100 dark:bg-stone-900">
            <div className="relative">
                {/* Animated Pottery Outline */}
                <motion.svg
                    width="120"
                    height="160"
                    viewBox="0 0 120 160"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <motion.path
                        d="M30 150C30 155.523 34.4772 160 40 160H80C85.5228 160 90 155.523 90 150V140H30V150Z"
                        stroke="currentColor"
                        strokeWidth="2"
                        className="text-stone-800 dark:text-stone-200"
                        initial={{ pathLength: 0, opacity: 0 }}
                        animate={{ pathLength: 1, opacity: 1 }}
                        transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatType: "reverse" }}
                    />
                    <motion.path
                        d="M30 140C30 140 10 100 10 60C10 32.3858 32.3858 10 60 10C87.6142 10 110 32.3858 110 60C110 100 90 140 90 140H30Z"
                        stroke="currentColor"
                        strokeWidth="2"
                        className="text-stone-800 dark:text-stone-200"
                        initial={{ pathLength: 0, opacity: 0 }}
                        animate={{ pathLength: 1, opacity: 1 }}
                        transition={{ duration: 2, ease: "easeInOut", repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
                    />
                    <motion.ellipse
                        cx="60"
                        cy="10"
                        rx="25"
                        ry="5"
                        stroke="currentColor"
                        strokeWidth="2"
                        className="text-stone-800 dark:text-stone-200"
                        initial={{ pathLength: 0, opacity: 0 }}
                        animate={{ pathLength: 1, opacity: 1 }}
                        transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatType: "reverse", delay: 1 }}
                    />
                </motion.svg>

                <motion.div
                    className="mt-8 text-center"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, repeat: Infinity, repeatType: "reverse" }}
                >
                    <span className="font-display text-sm tracking-[0.3em] uppercase text-stone-500">Shaping</span>
                </motion.div>
            </div>
        </div>
    );
};

export default PageLoader;