import React from 'react';
import { Dropdown, Form, Label } from '@theorchard/suite-components';
import { type PaymentExistingGroupProps } from 'src/types/payment-group-form';

export default function PaymentExistingGroup({
    changeHandler,
    existingPaymentGroups,
}: PaymentExistingGroupProps) {
    return (
        <div
            className="PaymentGroupFormFieldsGroup"
            data-testid="PaymentExistingGroup"
        >
            <div>
                <Label text="Group Name" />
                <Dropdown
                    className="paymentGroup"
                    onChange={e =>
                        changeHandler({
                            target: {
                                name: 'paymentGroupId',
                                value: e?.value ?? '',
                            },
                        })
                    }
                    options={existingPaymentGroups}
                    placeholder="Select"
                />
            </div>
            <div>
                <Label text="Payment Name" />
                <Form.Control
                    data-testid="input-payment-name"
                    name="paymentName"
                    onChange={e => changeHandler(e)}
                    placeholder="Enter Payment Name"
                    type="text"
                />
            </div>
        </div>
    );
}