import { MeshGradient } from 'css-mesh';

function App() {
  return (
    <MeshGradient 
      theme="sunset" 
      animated={true}
      animationType="float"
    >
      <div>Your content here</div>
    </MeshGradient>
  );
}

// Orb Mode for AI Assistants
function ChatBot() {
  return (
    <MeshGradient
      theme="sunsetGlow"
      shape="orb"
      size={85}
      animated={true}
      animationType="morph"
      containerAnimation="rotation"
      dropShadow={32}
      lighting3d={{
        enabled: true,
        position: { x: 75, y: 15 },
        intensity: 0.85
      }}
    />
  );
}

interface MeshGradientProps {
  theme?: string;                          // Theme name (default: 'sunset')
  customConfig?: Partial<BackgroundConfig>; // Custom ellipse configuration
  className?: string;                      // Additional CSS classes
  style?: React.CSSProperties;             // Custom styles
  children?: React.ReactNode;              // Content to overlay
  animated?: boolean;                      // Enable animations (default: false)
  animationType?: AnimationType;           // Animation type (default: 'float')
  animationConfig?: Partial<AnimationConfig>; // Animation settings
  containerAnimation?: ContainerAnimationType; // Container-level animations
  mouseTracking?: MouseTrackingConfig;     // Mouse interaction settings
  visualEffects?: VisualEffectsConfig;     // Color/visual adjustments
  shape?: 'background' | 'orb';           // Display mode (default: 'background')
  size?: number;                          // Orb size percentage (default: 80)
  dropShadow?: number | boolean;          // Drop shadow size or enable (default: false)
  dropShadowOpacity?: number;             // Shadow opacity 0-1 (default: 0.4)
  dropShadowDirection?: { x: number; y: number }; // Shadow direction (default: {x: 0, y: 8})
  lighting3d?: {                          // 3D lighting overlay
    enabled: boolean;
    position?: { x: number; y: number };  // Light position 0-100% (default: {x: 30, y: 30})
    intensity?: number;                   // Light intensity 0-1 (default: 0.3)
  };
}

const customConfig = {
  backgroundColor: '#1a1a2e',
  shapes: [
    {
      id: 'custom-1',
      width: 80,        // Percentage of container width
      height: 30,       // Percentage of container height  
      x: -10,           // X position (percentage, can be negative)
      y: 20,            // Y position (percentage, can be negative)
      gradient: 'radial-gradient(ellipse, #ff6b6b 0%, #ee5a24 100%)',
      blur: 60,         // Blur intensity in pixels
      opacity: 0.7,     // Opacity (0-1)
      zIndex: 1,        // Stacking order
      shape: 'ellipse', // Shape type
    },
    // ... more ellipses
  ],
};

<MeshGradient customConfig={customConfig}>
  <YourContent />
</MeshGradient>

<MeshGradient 
  theme="sunset"
  mouseTracking={{
    enabled: true,
    mode: 'attract',    // 'attract' or 'repel'
    intensity: 0.3,     // 0-1 strength
    radius: 30          // Effect radius in pixels
  }}
>
  <YourContent />
</MeshGradient>

<MeshGradient
  theme="cyberpunk"
  shape="orb"
  size={85}
  animated={true}
  animationType="morph"
  containerAnimation="rotation"
  dropShadow={32}
  dropShadowOpacity={0.6}
  dropShadowDirection={{ x: 0, y: 12 }}
  lighting3d={{
    enabled: true,
    position: { x: 75, y: 25 },
    intensity: 0.8
  }}
/>

<MeshGradient
  theme="deepSpace"
  lighting3d={{
    enabled: true,
    position: { x: 30, y: 30 },  // Light position (0-100%)
    intensity: 0.5               // Light intensity (0-1)
  }}
  dropShadow={25}                // Shadow size in pixels
  dropShadowOpacity={0.4}        // Shadow opacity (0-1)
  dropShadowDirection={{ x: 5, y: 10 }} // Shadow offset
>
  <YourContent />
</MeshGradient>

## 📄 License

MIT License - see [LICENSE](./LICENSE) for details.

---

*CSS-based animated gradient backgrounds for React*