frontend/src/components/common/Spinner.tsx

import React from 'react';
import { motion } from 'framer-motion';

interface SpinnerProps {
  size?: 'sm' | 'md' | 'lg';
  color?: 'emerald' | 'white';
}

const Spinner: React.FC<SpinnerProps> = ({ size = 'md', color = 'emerald' }) => {
  const sizes = {
    sm: 'w-4 h-4',
    md: 'w-6 h-6',
    lg: 'w-8 h-8',
  };

  const colors = {
    emerald: 'border-emerald-500 border-t-transparent',
    white: 'border-white border-t-transparent',
  };

  return (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
      className={`${sizes[size]} ${colors[color]} border-2 rounded-full`}
    />
  );
};

export default Spinner;