'use client';

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

interface ProgressLineProps {
  isLoading: boolean;
  className?: string;
}

export function ProgressLine({ isLoading, className = '' }: ProgressLineProps) {
  if (!isLoading) return null;

  return (
    <Box
      w="full"
      h="0.5"
      bg="bg-iron-gray"
      overflow="hidden"
      className={`relative ${className}`}
    >
      <motion.div
        className="absolute top-0 left-0 h-full bg-primary-blue"
        initial={{ width: '0%', left: '0%' }}
        animate={{
          width: ['20%', '50%', '20%'],
          left: ['-20%', '100%', '-20%'],
        }}
        transition={{
          duration: 1.5,
          repeat: Infinity,
          ease: 'linear',
        }}
      />
    </Box>
  );
}