/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/destructuring-assignment */
import type { FormEvent } from 'react';
import type React from 'react';

import RadioButtonSvg from '../../Financials/Components/UI/RadioButtonSvg';

interface PaymentMethodInterface {
	onClick: (event: FormEvent) => void;
	onChange: (event: FormEvent) => void;
	radioButtonClass: string;
	radioId: string;
	label: string;
	value: string;
	radioName: string;
	cardContainer: string;
	svg: JSX.Element;
	for: string;
}

const PaymentMethod: React.FC<PaymentMethodInterface> = (
	props: PaymentMethodInterface
): JSX.Element => (
	<div className={props.cardContainer} onClick={props.onClick}>
		<input
			id={props.radioId}
			name={props.radioName}
			onChange={props.onChange}
			type="radio"
			value={props.value}
		/>
		{props.svg}
		<label htmlFor={props.for}>{props.label}</label>
		<RadioButtonSvg class={props.radioButtonClass} />
	</div>
);

export default PaymentMethod;