/* eslint-disable jsx-a11y/no-static-element-interactions */
import classNames from 'classnames';
import type { ChangeEventHandler, MouseEventHandler } from 'react';
import type React from 'react';

import RadioButtonSvg from './RadioButtonSvg';
import styles from './scss/FinancialsCard.module.scss';

interface Card {
	label: string;
	content: string;
	footerText: string;
	radioValue: string;
	radioName: string;
	radioId: string;
	onClick: MouseEventHandler<HTMLInputElement>;
	cardContainer: string;
	radioButtonClass: string;
	onChange: ChangeEventHandler<HTMLInputElement>;
}

const FinancialsCard: React.FC<Card> = (props: Card): JSX.Element => (
	<div className={classNames(props.cardContainer, styles.cardContainer)} onClick={props.onClick}>
		{/* <span> */}
		<label htmlFor={props.radioId} className={styles.label}>
			{props.label}
		</label>
		<input
			id={props.radioId}
			name={props.radioName}
			onChange={props.onChange}
			type="radio"
			value={props.radioValue}
		/>
		<span dangerouslySetInnerHTML={{ __html: props.content }} />
		<h4 className={styles.footerText}>
			<sup>*</sup>
			{props.footerText}
		</h4>
		<RadioButtonSvg class={props.radioButtonClass} />
	</div>
);

export default FinancialsCard;