/* eslint-disable react/destructuring-assignment */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/no-unused-prop-types */
import type { ChangeEventHandler, MouseEventHandler } from 'react';
import type React from 'react';

import styles from './RadioButtonCards.module.scss';

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

const RadioButtonCard: React.FC<Card> = (props: Card): JSX.Element => (
	<div
		className={[props.classNameContainer, styles.cardContainer].join(' ')}
		onClick={props.onClick}
	>
		<label htmlFor={props.radioId}>{props.label}</label>
		<input
			id={props.radioId}
			name={props.radioName}
			onChange={props.onChange}
			type="radio"
			value={props.radioValue}
		/>
		<p>{props.content}</p>
		{props.footerText && <h4>{props.footerText}</h4>}
	</div>
);

export default RadioButtonCard;