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

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

interface Card {
	label: string;
	content?: string;
	footerText?: string;
	radioValue: string;
	radioName: string;
	radioId: string;
	selectedPermission: string;
	className?: 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,
			`${props.className ? styles[props.className] : ''}`
		].join(' ')}
		onClick={
			props.onClick
				? props.onClick
				: () => {
						// alert();
				  }
		}
	>
		<input
			id={props.radioId}
			name={props.radioName}
			onChange={props.onChange}
			type="radio"
			value={props.radioValue}
			checked={props.radioValue === props.selectedPermission}
		/>
		<label htmlFor={props.radioId} className={props.className ? props.className : ''}>
			{props.label}
		</label>
		{props.content && <p>{props.content}</p>}
		{props.footerText && <h4>{props.footerText}</h4>}
		{/* <RadioButtonSvg class={props.radioButtonClass} /> */}
	</div>
);

export default RadioButtonCard;