import React from 'react';
import { __ } from '@wordpress/i18n';
import { Box, Typography } from '@mui/material';
import CustomFieldsPreview from './CustomFieldsPreview';
import { fieldBoxStyle, previewLabelSx } from './blockPreviewStyles';

const InformationStepPreview = ({ customUserFields = [] }) => (
	<Box>
		<Typography sx={{ mb: 1.5, color: '#64748b', fontSize: '14px' }}>
			{__('Contact Details', 'bookify')}
		</Typography>

		<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1.5 }}>
			<Box>
				<Typography sx={previewLabelSx}>
					{__('First Name', 'bookify')} *
				</Typography>
				<Box sx={fieldBoxStyle}>{__('e.g. John', 'bookify')}</Box>
			</Box>
			<Box>
				<Typography sx={previewLabelSx}>
					{__('Last Name', 'bookify')} *
				</Typography>
				<Box sx={fieldBoxStyle}>{__('e.g. Doe', 'bookify')}</Box>
			</Box>
			<Box>
				<Typography sx={previewLabelSx}>
					{__('Email Address', 'bookify')} *
				</Typography>
				<Box sx={fieldBoxStyle}>{__('john.doe@example.com', 'bookify')}</Box>
			</Box>
			<Box>
				<Typography sx={previewLabelSx}>
					{__('Phone Number', 'bookify')} *
				</Typography>
				<Box sx={fieldBoxStyle}>{__('123 456 789', 'bookify')}</Box>
			</Box>

			<CustomFieldsPreview fields={customUserFields} />
		</Box>

		<Box sx={{ mt: 1.5 }}>
			<Typography sx={previewLabelSx}>
				{__('Note (Optional)', 'bookify')}
			</Typography>
			<Box sx={{ ...fieldBoxStyle, minHeight: '72px' }}>
				{__('Any specific instructions for your booking...', 'bookify')}
			</Box>
		</Box>
	</Box>
);

export default InformationStepPreview;