import React from 'react';

interface BackgroundProps {
  background: string;
}

export function Background({ background }: BackgroundProps) {
  const getBackgroundStyle = () => {
    switch (background) {
      case 'rainbow':
        return {
          background: 'linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)',
          backgroundSize: '400% 400%',
          animation: 'rainbow 10s ease infinite'
        };
      case 'matrix':
        return {
          background: 'linear-gradient(135deg, #000000 0%, #0d4a0d 50%, #000000 100%)',
          backgroundImage: 'radial-gradient(circle at 20% 50%, #00ff00 1px, transparent 1px), radial-gradient(circle at 80% 50%, #00ff00 1px, transparent 1px)',
          backgroundSize: '20px 20px',
          animation: 'matrix 20s linear infinite'
        };
      case 'cyberpunk':
        return {
          background: 'linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 25%, #16213e 50%, #e94560 75%, #0f3460 100%)',
          backgroundSize: '400% 400%',
          animation: 'cyberpunk 15s ease infinite'
        };
      case 'space':
        return {
          background: 'radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)',
          backgroundImage: 'radial-gradient(2px 2px at 20px 30px, #eee, transparent), radial-gradient(2px 2px at 40px 70px, #fff, transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent)',
          backgroundSize: '200px 100px',
          animation: 'stars 50s linear infinite'
        };
      case 'musume':
        return {
          background: 'url("/special/umamusume.gif") no-repeat center center fixed',
          backgroundSize: 'cover',
          animation: 'none'
        };
      case 'ultimate':
        return {
          background: 'conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000)',
          backgroundSize: '400% 400%',
          animation: 'ultimate 5s linear infinite'
        };
      case 'god-tier':
        return {
          background: 'url("/special/bathtub.png") no-repeat center center fixed',
          backgroundSize: 'contain',
          animation: 'none'
        };

      default:
        return {
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
        };
    }
  };

  return (
    <div 
      className="fixed inset-0 -z-10"
      style={getBackgroundStyle()}
    />
  );
}