GenerateFormComponent.js

import withForm from "@/components/Booking/withForm";
import {useSelector} from "react-redux";

const GenerateFormComponent = ({ fields, handleFieldChange }) => {
    const formFields = useSelector((state) => state.form.fields);
    console.log(fields);
    const renderField = (field) => {
        switch (field.type) {
            case 'text':
                return (
                    <div key={field.id} className={`lg:col-span-1 col-span-2 mb-7.5`}>
                        <label htmlFor={field.id} className={`font-manrope text-title-sm font-semibold text-black mb-3 block`}>
                            {field.label}
                        </label>
                            <input
                                type={field.type}
                                name={field.id}
                                id={field.id}
                                className={`border border-grey w-full px-4 py-3 text-title-sm text-black placeholder-silver`}
                                placeholder={field.placeholder}
                                value={formFields.find((f) => f.id === field.id)?.value || ''}
                                onChange={(e) => handleFieldChange(field.id, e.target.value)}
                            />
                    </div>
                );
            case 'checkbox':
                return (
                    <div key={field.id} className={`mb-7.5 col-span-2`}>
                        <label className={`font-manrope text-title-sm font-semibold text-black mb-3 block`}>
                            {field.label}
                        </label>
                        {field.extraLabel && (
                            <p className={`font-manrope text-[14px] text-light-black font-normal mb-3`}>{field.extraLabel}</p>
                        )}
                        <div className={`border border-grey p-4`}>
                            {field.options.map((option) => (
                                <div key={option.value} className={`flex items-center mb-3`}>
                                    <input
                                        type="checkbox"
                                        name={`${field.id}[]`}
                                        id={field.id}
                                        value={option.value}
                                        onChange={(e) => handleFieldChange(field.id, e.target.value)}
                                    />
                                    <span className={`font-manrope text-title-xsm3 font-normal text-light-black ml-2 block`}>{option.label}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                );

            case 'select':
                return (
                    <div key={field.id} className={`lg:col-span-1 col-span-2 mb-7.5`}>
                        <label htmlFor={field.id} className={`font-manrope text-title-sm font-semibold text-black mb-3 block`}>
                            {field.label}
                        </label>
                        <select
                            name={field.id}
                            id={field.id}
                            className={`border border-grey w-full px-4 py-3 text-title-sm text-black placeholder-silver`}
                            value={formFields.find((f) => f.id === field.id)?.value || ''}
                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
                        >

                            {field.options.map((option, index) => (
                                <option key={index} value={option}>
                                    {option}
                                </option>
                            ))}
                        </select>
                    </div>
                );
                case 'textarea':
                    return (
                        <div key={field.id} className={`col-span-2 mb-7.5`}>
                            <label htmlFor={field.id} className={`font-manrope text-title-sm font-semibold text-black mb-3 block`}>
                                {field.label}
                            </label>
                            <textarea
                                name={field.id}
                                id={field.id}
                                rows={5}
                                className={`border border-grey w-full px-4 py-3 text-title-sm text-black placeholder-silver`}
                                placeholder={field.placeholder}
                                value={formFields.find((f) => f.id === field.id)?.value || ''}
                                onChange={(e) => handleFieldChange(field.id, e.target.value)}
                            ></textarea>
                            </div>
                    );
            default:
                return null;
        }
    };

    return <div className={`grid grid-cols-1 lg:grid-cols-2 lg:gap-8`}>{fields.map((field) => renderField(field))}</div>;
};

export default withForm(GenerateFormComponent);