import '../scss/dashboard.scss';

/**
 * Monitor.Cat — Dashboard interactions.
 *
 * Stagger-animates module cards on load and handles any
 * dashboard-specific interactivity.
 *
 * @package MonitorCat
 */
( function () {
	'use strict';

	/**
	 * Stagger-animate module cards so they appear one after another.
	 */
	function animateModuleCards() {
		var cards = document.querySelectorAll( '.mc-module-card' );
		var delay = 0;
		var increment = 80; // milliseconds between each card

		cards.forEach( function ( card ) {
			card.style.opacity = '0';
			card.style.transform = 'translateY(16px)';

			setTimeout( function () {
				card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
				card.style.opacity = '1';
				card.style.transform = 'translateY(0)';
			}, delay );

			delay += increment;
		} );
	}

	// -------------------------------------------------------------------------
	// Init
	// -------------------------------------------------------------------------
	document.addEventListener( 'DOMContentLoaded', function () {
		var dashboard = document.querySelector( '.mc-dashboard' );
		if ( ! dashboard ) {
			return;
		}

		animateModuleCards();
	} );
} )();
