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

const CustomFieldsPreview = ({ fields = [] }) => {
	const safeFields = Array.isArray(fields) ? fields.filter((field) => field?.label) : [];

	if (!safeFields.length) {
		return null;
	}

	return (
		<>
			{safeFields.map((field) => {
				const additionalClass = getAdditionalClass(field.type);

				return (
					<Box
						key={field.id}
						sx={{
							gridColumn: field.type === 'textarea' ? 'span 2' : 'span 1',
						}}
					>
						<Typography sx={previewLabelSx}>
							{field.label}
							{field.required ? ' *' : ''}
						</Typography>
						<Box
							className={additionalClass}
							sx={field.type === 'textarea' ? { ...fieldBoxStyle, minHeight: '72px' } : fieldBoxStyle}
						>
							{field.placeholder || field.label}
						</Box>
					</Box>
				);
			})}
		</>
	);
};

export default CustomFieldsPreview;