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

/**
 * External dependencies
 */
import type { RunningExperimentSummary } from '@nab/types';

/**
 * Internal dependencies
 */
import { OverviewExperimentsList } from './overview-experiments-list';

type ExtendedRunningExperimentsProps = {
	readonly experiments: ReadonlyArray< RunningExperimentSummary >;
	readonly heatmaps: ReadonlyArray< RunningExperimentSummary >;
	readonly onBackClicked: () => void;
};

export const ExtendedRunningExperiments = ( {
	experiments,
	heatmaps,
	onBackClicked,
}: ExtendedRunningExperimentsProps ): JSX.Element => (
	<>
		<OverviewExperimentsList
			experiments={ experiments }
			heatmaps={ heatmaps }
		/>
		<div style={ { marginTop: '2em', textAlign: 'center' } }>
			<Button variant="secondary" onClick={ onBackClicked }>
				{ _x( '← Back to Overview', 'command', 'nelio-ab-testing' ) }
			</Button>
		</div>
	</>
);