Untitled

update the below code correctly so that it displayes offering, program then category one after another in the below format,(offering is displayed correctly, update code fot program amd category so that it can handle multiple values)

offering: offering
program : program1 , program2 , program3
category : category1 , category2


we get value in the below format:
{
            "id": 12701,
            "title": "this is due today hi this is the RFI title pretty long",
            "description": "adffds",
            "reqDT": "2024-06-10T18:32:16.950236",
            "state": "NM",
            "programs": "AU,SNAP",
            "category": "EG,FO",
            "status": "SB",
            "dueDT": "06-10-2024",
            "offering": "EE"
        },




code:

import React from 'react';
import {
    Button,
    Label,
    Column,
    Row,
    Accordian,
    AccordianElement,
    Para,
} from '@d-lift/uxcomponents';
import { Util, useAppState } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';

const RFIDetails = ({
    rfi,
    responseStats,
    updatedDueDt,
    summarizeResponse,
    updateSummarizeResponse,
}) => {
    const renderProgramCategoryValues = (values, refTableName) => {
        return values.split(',').map((value) => (
            <Para className="mt-2 mr-2 p-1 ux-rfi-label-normal" key={value}>
                {Util.getRefTableDescriptionByCode(refTableName, value)}
            </Para>
        ));
    };

    return (
        <>
            <Accordian id="accordian">
                <AccordianElement headerText={rfi.title} initialState="show">
                    <Row>
                        <Column className="col-9">
                            <Row className="d-flex flex-wrap">
                                <Para
                                    labelKey="offering"
                                    className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal">
                                    {Util.getRefTableDescriptionByCode(
                                        ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                        rfi.offering,
                                    )}
                                </Para>
                                <Para
                                    labelKey="program"
                                    className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal">
                                    {renderProgramCategoryValues(
                                        rfi.programs,
                                        ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                    )}
                                </Para>
                                <Para
                                    labelKey="category"
                                    className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal">
                                    {renderProgramCategoryValues(
                                        rfi.category,
                                        ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                    )}
                                </Para>
                            </Row>
                        </Column>

                        <Column>
                            <div className="ux-rfi-grey-border">
                                <Label
                                    labelKey="requested_by"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para className="ux-rfi-bold">
                                    {Util.getRefTableDescriptionByCode(
                                        ConstantKeys.REF_TABLE_NAMES.STATE,
                                        rfi.state,
                                    )}
                                </Para>
                                <Label
                                    labelKey="due"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para className="ux-rfi-bold">{updatedDueDt}</Para>
                                <Label
                                    labelKey="responses"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para className="ux-rfi-bold">{responseStats}</Para>
                                <div className="m-0 p-1">
                                    {!summarizeResponse ? (
                                        <Button
                                            id="summarizeBtn"
                                            size="small"
                                            className="ux-rfi-green-button"
                                            click={() => updateSummarizeResponse(true)}
                                            labelKey="summarize_btn"></Button>
                                    ) : (
                                        <Button
                                            id="responseBtn"
                                            size="small"
                                            className="ux-rfi-green-button"
                                            click={() => updateSummarizeResponse(false)}
                                            labelKey="response_btn"></Button>
                                    )}
                                </div>
                            </div>
                        </Column>
                    </Row>
                    <div className="ux-rfi-grey-border w-100 mt-3">
                        <Para className="mt-2 scrollable-content">
                            <div className="ux-rfi-table-container-desc">
                                {rfi.description ? (
                                    rfi.description
                                ) : (
                                    <h4 className="text-muted">Description Not available!!</h4>
                                )}
                            </div>
                        </Para>
                    </div>
                </AccordianElement>
            </Accordian>
        </>
    );
};

export default RFIDetails;