// Import the package
import { 
    displayAlert,          // Generic alert function
    displayAlertSuccess,   // Success variant
    displayAlertError,     // Error variant
    displayAlertWarning,   // Warning variant
    displayAlertInfo,      // Info variant
    displayAlertLoader     // Loading variant
} from 'simple-display-alert';

// Import the CSS (required)
import '@jaymago/simple-display-alert/dist/index.css';

// Success message (green)
displayAlertSuccess('Operation completed successfully!');

// Error message (red)
displayAlertError('An error occurred!');

// Warning message (yellow)
displayAlertWarning('Please check your input');

// Info message (blue)
displayAlertInfo('This is an informational message');

// Loading message (with spinner)
displayAlertLoader('Loading...');

// First, import both the functions and CSS
import { displayAlert, displayAlertSuccess } from '@jaymago/simple-display-alert';
import '@jaymago/simple-display-alert/dist/index.css';

// Then use the alert functions
displayAlertSuccess('Operation completed successfully!');

displayAlert('Custom alert', {
  type: 'info',
  position: 'top-right',
  timeout: 3000
});

// Multiple alerts
displayAlert('First alert', { position: 'top-left' });
displayAlert('Second alert', { position: 'top-right' });

// Success alert with custom position and animation
displayAlertSuccess('Success with options', { 
    position: 'top-right',     // Position in top-right corner
    fadeDirection: 'left'      // Slide in from right
});

// Error alert that stays visible and allows multiple alerts
displayAlertError('Error with options', { 
    timeout: 0,                // Stays visible indefinitely
    multiple: true            // Can stack with other alerts
});

// Warning alert with custom position and animation
displayAlertWarning('Warning with options', { 
    position: 'bottom-left',   // Position in bottom-left corner
    fadeDirection: 'bottom'    // Slide in from top
});

// Info alert with custom timeout
displayAlertInfo('Info with options', { 
    timeout: 3000,            // Hide after 3 seconds
    multiple: true            // Can stack with other alerts
});

// Loading alert with custom position and timeout
displayAlertLoader('Loading with options', { 
    position: 'top-right',    // Position in top-right corner
    timeout: 2000             // Hide after 2 seconds
});

interface DisplayAlertProps {
    // Alert type
    variant: 'success' | 'error' | 'warning' | 'info' | 'white' | 'loader';
    
    // Content
    message: string;
    icon?: 'success' | 'danger' | 'warning' | 'info' | 'loader';
    
    // Positioning
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    
    // Animation
    fadeDirection?: 'left' | 'right' | 'top' | 'bottom' | 'none';
    
    // Behavior
    timeout?: number;         // Time in ms (0 for no auto-hide)
    closeBtn?: boolean;       // Show/hide close button
    multiple?: boolean;       // Allow multiple alerts
    backdrop?: boolean;       // Show backdrop behind alert
}

// Example usage with all options
displayAlert({
    variant: 'success',
    message: 'Your message here',
    icon: 'success',
    position: 'bottom-right',
    fadeDirection: 'left',
    timeout: 5000,
    closeBtn: true,
    multiple: false,
    backdrop: false
});

// Available icon options
type AlertIcon = 'success' | 'danger' | 'warning' | 'info' | 'loader';

// Examples
displayAlert({
    variant: 'white',
    message: 'Custom success icon',
    icon: 'success'
});

displayAlert({
    variant: 'white',
    message: 'Custom warning icon',
    icon: 'warning'
});

// Loader icon with custom message
displayAlert({
    variant: 'white',
    message: 'Processing...',
    icon: 'loader'
});

// No icon
displayAlert({
    variant: 'info',
    message: 'Message without icon',
    icon: undefined
});