/**
 * WordPress dependencies
 */
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import type { Walkthrough } from '@nelio-content/types';

export const walkthrough: Walkthrough = [
	{
		title: _x( 'Settings - Custom Statuses', 'text', 'nelio-content' ),
		intro: _x(
			'Custom statuses allow you to create and manage your own editorial workflows, making it easier to track the progress of your content.',
			'text',
			'nelio-content'
		),
	},
	{
		title: _x( 'Custom Statuses', 'text', 'nelio-content' ),
		intro: _x(
			'You can easily create new custom statuses using this button.',
			'text',
			'nelio-content'
		),
		element: () =>
			document.querySelector( '.nelio-content-add-custom-status' ),
	},
	{
		title: _x( 'Custom Statuses', 'text', 'nelio-content' ),
		intro: _x(
			'Each status has an identifying name. Hover on each status to reveal its actions and, thus, be able to edit or delete it.',
			'text',
			'nelio-content'
		),
		element: () => document.querySelector( '.nelio-content-status' ),
		active: () => !! document.querySelector( '.nelio-content-status' ),
	},
	{
		title: _x( 'Save Changes', 'text', 'nelio-content' ),
		intro: _x(
			'Once you’re happy with your setup, don’t forget to save your changes using this button!',
			'user',
			'nelio-content'
		),
		element: () =>
			document.querySelector( '.nelio-content-save-button.is-primary' ),
	},
];