'use client';

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useTransition } from './TransitionProvider';

export function PageTransitionShutter() {
  const { isTransitioning } = useTransition();

  return (
    <AnimatePresence>
      {isTransitioning && (
        <motion.div
          key="shutter"
          initial={{ y: '100%' }}
          animate={{ y: '0%' }}
          exit={{ y: '-100%' }}
          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          className="fixed inset-0 z-[9998] bg-primary-dark pointer-events-none flex flex-col items-center justify-center overflow-hidden"
        >
          {/* E-TIB Premium Glow inside the Shutter */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/20 via-transparent to-transparent opacity-50" />
          
          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 1.1 }}
            transition={{ duration: 0.4, delay: 0.2 }}
            className="w-16 h-16 border-t-2 border-r-2 border-primary rounded-full animate-spin"
          />
        </motion.div>
      )}
    </AnimatePresence>
  );
}