import { AnimatePresence, motion } from 'motion/react';

interface RefreshOverlayProps {
  refreshing: boolean;
  hasData: boolean;
}

export function RefreshOverlay({ refreshing, hasData }: RefreshOverlayProps) {
  return (
    <AnimatePresence>
      {refreshing && hasData && (
        <motion.div
          key="refresh-overlay"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="fixed top-0 left-0 right-0 h-0.5 z-50 pointer-events-none overflow-hidden"
        >
          <motion.div
            className="h-full bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400"
            initial={{ x: '-100%' }}
            animate={{ x: '100%' }}
            transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
            style={{ width: '40%' }}
          />
        </motion.div>
      )}
    </AnimatePresence>
  );
}