/**
 * Scrollable selected-items list for bulk confirm modals.
 */
import { __ } from '@wordpress/i18n';

/**
 * @param {object} props
 * @param {string} [props.label]
 * @param {Array<{ id: number|string, title: string, meta?: string }>} props.items
 */
export default function BulkConfirmItemsList( { label, items } ) {
	const rows = Array.isArray( items ) ? items : [];

	return (
		<div className="bm-confirm-modal__items">
			<div className="bm-confirm-modal__items-head">
				<span className="bm-confirm-modal__meta-label">
					{ label || __( 'Selected', 'joc-blockora-morph' ) }
				</span>
				<span className="bm-confirm-modal__items-count">
					{ rows.length }
				</span>
			</div>
			{ rows.length === 0 ? (
				<p className="bm-confirm-modal__items-empty">
					{ __( 'No items selected.', 'joc-blockora-morph' ) }
				</p>
			) : (
				<ul className="bm-confirm-modal__items-list">
					{ rows.map( ( item ) => (
						<li key={ item.id } className="bm-confirm-modal__item">
							<span className="bm-confirm-modal__item-title">
								{ item.title }
							</span>
							{ item.meta ? (
								<span className="bm-confirm-modal__item-meta">
									{ item.meta }
								</span>
							) : null }
						</li>
					) ) }
				</ul>
			) }
		</div>
	);
}
