import React from 'react';
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { Placeholder } from '@wordpress/components';


const AppointmentsBlock = () => {
	const blockProps = useBlockProps({
		className: 'bookify-block bookify-appointments'
	});

	return (
		<div {...blockProps}>
			<Placeholder
				icon="calendar-alt"
				label={__('Bookify Appointments List', 'bookify')}
				instructions={__('Display a list of appointments for logged-in users. Users must be logged in to see their appointments.', 'bookify')}
			>
				<div style={{
					padding: '20px',
					textAlign: 'center',
					color: '#666',
					fontSize: '14px'
				}}>
					<p style={{ margin: '0 0 10px 0' }}>
						{__('This block will display the appointments list for logged-in users.', 'bookify')}
					</p>
					<p style={{ margin: '0', fontSize: '12px', color: '#999' }}>
						{__('Note: Users must be logged in to view their appointments.', 'bookify')}
					</p>
				</div>
			</Placeholder>
		</div>
	);
};

export default AppointmentsBlock;