Untitled

import React, { useState } from 'react';
import { Textarea, Textbox, Card, Label, Button, Group } from '@d-lift/uxcomponents';

const Questionnaire = () => {
    const [questions, setQuestions] = useState([{ question: '', description: '' }]);

    const handleAddQuestion = () => {
        setQuestions([...questions, { question: '', description: '' }]);
    };

    const handleInputChange = (index, event) => {
        const { name, value } = event.target;
        const newQuestions = [...questions];
        newQuestions[index][name] = value;
        setQuestions(newQuestions);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted data', questions);
    };

    return (
        <div>
            {questions.map((q, index) => (
                <Card key={index} style={{ marginBottom: '20px' }}>
                    <Label className="bold-font">Question {index + 1} :</Label>
                    <Textbox
                        name="question"
                        value={q.question}
                        onChange={(e) => handleInputChange(index, e)}
                    ></Textbox>

                    <Label className="bold-font" labelKey="request_desc">
                        Description:
                    </Label>
                    <Textarea
                        id="noresize"
                        maxLength="100"
                        rows="5"
                        wrap="hard"
                        name="description"
                        value={q.description}
                        onChange={(e) => handleInputChange(index, e)}
                    ></Textarea>
                </Card>
            ))}

            <Group>
                <Button
                    id="addQues-btn"
                    className="green-button"
                    onClick={handleAddQuestion}
                    labelKey="addQues_btn"
                    text="Add Another Question"
                ></Button>

                <Button
                    id="submit-btn"
                    className="green-button"
                    onClick={handleSubmit}
                    labelKey="submit_btn"
                    text="Submit Request"
                ></Button>
            </Group>
        </div>
    );
};

export default Questionnaire;