'use client';

import { Box } from '@/ui/Box';
import { motion } from 'framer-motion';

interface ProgressLineProps {
  isLoading: boolean;
}

export function ProgressLine({ isLoading }: ProgressLineProps) {
  if (!isLoading) return null;

  return (
    <Box
      fullWidth
      height="2px"
      bg="var(--ui-color-bg-surface-muted)"
      style={{ overflow: 'hidden', position: 'relative' }}
    >
      <motion.div
        style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          height: '100%', 
          backgroundColor: 'var(--ui-color-intent-primary)' 
        }}
        initial={{ width: '0%', left: '0%' }}
        animate={{
          width: ['20%', '50%', '20%'],
          left: ['-20%', '100%', '-20%'],
        }}
        transition={{
          duration: 1.5,
          repeat: Infinity,
          ease: 'linear',
        }}
      />
    </Box>
  );
}