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

export const SectionDivider = () => (
  <div className="relative h-[1px] w-full max-w-7xl mx-auto overflow-hidden opacity-10 dark:opacity-20 transition-opacity duration-1000">
    <motion.div
      initial={{ x: '-100%' }}
      whileInView={{ x: '100%' }}
      viewport={{ once: false }}
      transition={{ 
        duration: 10, 
        repeat: Infinity, 
        ease: "easeInOut",
        repeatDelay: 1
      }}
      className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/30 to-transparent w-[80%] h-full"
    />
  </div>
);

export const StatsBadge = ({ label, value, color }: { label: string, value: string, color: string }) => (
  <div className="bg-white dark:bg-slate-800 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 flex flex-col">
    <span className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-1">{label}</span>
    <span className={`text-2xl font-bold ${color}`}>{value}</span>
  </div>
);