import React from 'react';
import { cn } from '@/lib/utils';

/**
 * Static preview of embed form fields (matches public embed styling).
 */
export default function CtaFormPreview({ fields, className }) {
    const list = fields || [];

    return (
        <div className={cn('rounded-xl border border-slate-200 bg-white p-4', className)}>
            {list.length === 0 ? (
                <p className="text-sm text-slate-400 text-center py-6">Add fields to preview</p>
            ) : (
                <div className="space-y-3">
                    {list.map((f, idx) => (
                        <div key={`${f.key}-${idx}`}>
                            <label className="block text-xs font-medium text-slate-600 mb-1">
                                {f.label}
                                {f.required ? ' *' : ''}
                            </label>
                            {f.type === 'textarea' ? (
                                <textarea
                                    readOnly
                                    tabIndex={-1}
                                    rows={3}
                                    placeholder=""
                                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm bg-white pointer-events-none"
                                />
                            ) : (
                                <input
                                    readOnly
                                    tabIndex={-1}
                                    type={f.type || 'text'}
                                    placeholder=""
                                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm bg-white pointer-events-none"
                                />
                            )}
                        </div>
                    ))}
                    <button
                        type="button"
                        tabIndex={-1}
                        className="w-full rounded-lg bg-violet-600 py-2.5 text-sm font-semibold text-white pointer-events-none"
                    >
                        Submit
                    </button>
                </div>
            )}
        </div>
    );
}