import { __ } from '@wordpress/i18n';
import { Placeholder, Button } from '@wordpress/components';
import { columns as columnsIcon } from '@wordpress/icons';
import { COLUMN_STRUCTURES } from '../structures';

/**
 * On-insert layout picker (page-builder style): a grid of preset column
 * structures, each shown as a proportional mini-diagram. Selecting one builds
 * those columns.
 */
export default function StructurePicker( { onSelect } ) {
	return (
		<Placeholder
			icon={ columnsIcon }
			label={ __( 'Columns', 'axcelersblocks' ) }
			instructions={ __( 'Select a structure to start.', 'axcelersblocks' ) }
			className="axcelersblocks-columns-picker"
		>
			<ul className="axcelersblocks-columns-picker__list">
				{ COLUMN_STRUCTURES.map( ( structure ) => (
					<li key={ structure.key }>
						<Button
							className="axcelersblocks-columns-picker__item"
							label={ structure.label }
							showTooltip
							onClick={ () => onSelect( structure.widths ) }
						>
							<span className="axcelersblocks-columns-picker__preview" aria-hidden="true">
								{ structure.widths.map( ( w, i ) => (
									<span key={ i } style={ { flexGrow: w } } />
								) ) }
							</span>
							<span className="axcelersblocks-columns-picker__label">{ structure.label }</span>
						</Button>
					</li>
				) ) }
			</ul>
		</Placeholder>
	);
}
