Untitled

import React from 'react';
import { Accordian, AccordianElement, Label, Button, Para } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';

const Questions = ({ responseData }) => {
    console.log(responseData);
    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData?.map((question, index) => (
                <Accordian id={`outer-accordian-${index}`} key={question.id}>
                    <AccordianElement headerText={question.question}>
                        <Label>{question.answers.length} &nbsp; Responses:</Label>

                        {question.answers.map((answer, aIndex) => (
                            <Accordian id={`inner-accordian-${index}-${aIndex}`} key={answer.id}>
                                <AccordianElement headerText={answer.state}>
                                    <Para>{answer.answer}</Para>
                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-4 mb-2"
                                        labelKey="edit_response"
                                        // click={() => Navigate.to('/create-rfi')}
                                    ></Button>
                                </AccordianElement>
                            </Accordian>
                        ))}

                        <Button
                            id={`respond-btn-${index}`}
                            size="small"
                            className="ux-rfi-green-button float-right mt-4 mb-2"
                            labelKey="respond_question"
                            // click={() => Navigate.to('/create-rfi')}
                        ></Button>
                    </AccordianElement>
                </Accordian>
            ))}
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.array.isRequired,
};

export default Questions;