import { createElement } from '@wordpress/element'
import { expandOptionsFor } from './BuilderRoot'

const Bar = ({ bar }) => {
	return (
		<li className="builder-row">
			<div className="ct-row-actions">
				<button 
					className="row-settings"
					onClick={() => expandOptionsFor('header', bar)}>
				</button>

				Top Row
			</div>

			<ul className="row-inner">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</li>
	)
}

const PlacementsBuilder = () => {
	return (
		<div className="placements-builder">
			<ul className="horizontal-rows">
				{['top-bar', 'middle-bar', 'bottom-bar'].map(bar => (
					<Bar key={bar} bar={bar} />
				))}
			</ul>
		</div>
	)
}

export default PlacementsBuilder