/**
 * Form Preview - Live preview of form rendering
 */

import { __ } from '@wordpress/i18n';
import FormFieldPreview from './FormFieldPreview';
import './FormPreview.css';

export default function FormPreview({ fields }) {
    if (!fields || fields.length === 0) {
        return (
            <div className="formipay-form-preview">
                <div className="formipay-preview-header">
                    <h4>{ __('Live Preview', 'formipay') }</h4>
                </div>
                <div className="formipay-preview-content is-empty">
                    <p>{ __('Add fields to see the preview', 'formipay') }</p>
                </div>
            </div>
        );
    }

    return (
        <div className="formipay-form-preview">
            <div className="formipay-preview-header">
                <h4>{ __('Live Preview', 'formipay') }</h4>
            </div>
            <div className="formipay-preview-content">
                <form className="formipay-preview-form">
                    {fields.map((field, index) => (
                        <FormFieldPreview
                            key={field.field_id || index}
                            field={field}
                        />
                    ))}
                </form>
            </div>
        </div>
    );
}
