( function ( blocks, element ) {
	var el = element.createElement;

	blocks.registerBlockType( 'playard/my-bookings', {
		edit: function () {
			return el(
				'div',
				{
					style: {
						border: '1px dashed #CBD5E1',
						borderRadius: '10px',
						padding: '32px 24px',
						background: '#F8FAFC',
						textAlign: 'center',
						fontFamily: 'system-ui, sans-serif',
					},
				},
				el( 'div', {
					style: {
						display: 'inline-flex',
						alignItems: 'center',
						justifyContent: 'center',
						width: '40px',
						height: '40px',
						borderRadius: '10px',
						background: '#EFF6FF',
						marginBottom: '12px',
					},
				},
					el( 'svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: '#3B82F6', strokeWidth: 2 },
						el( 'path', { d: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2' } ),
						el( 'circle', { cx: 12, cy: 7, r: 4 } )
					)
				),
				el( 'p', { style: { margin: '0 0 4px', fontWeight: 600, fontSize: '14px', color: '#0F172A' } }, 'My Bookings' ),
				el( 'p', { style: { margin: 0, fontSize: '13px', color: '#64748B' } }, 'Customers see their booking history here. Login is handled automatically.' )
			);
		},
		save: function () {
			return null; // server-side render
		},
	} );
} )( window.wp.blocks, window.wp.element );
