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

export const Spinner = ({ className = "h-4 w-4" }: { className?: string }) => (
  <motion.div
    animate={{ rotate: 360 }}
    transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
    className={`${className} border-2 border-current border-t-transparent rounded-full`}
  />
);

export const ProgressBar = ({ isFetching }: { isFetching: boolean }) => (
  <AnimatePresence>
    {isFetching && (
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed top-0 left-0 w-full h-[3px] z-[100] pointer-events-none overflow-hidden bg-primary/10"
      >
        <motion.div
          animate={{ 
            x: ["-100%", "100%"],
          }}
          transition={{ 
            duration: 1.5,
            ease: "easeInOut",
            repeat: Infinity
          }}
          className="h-full bg-primary w-1/3 shadow-[0_0_15px_rgba(var(--primary-rgb),0.8)]"
        />
      </motion.div>
    )}
  </AnimatePresence>
);