/* eslint-disable react/destructuring-assignment */
import type { ChangeEventHandler, MouseEventHandler } from 'react';
import type React from 'react';

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

interface Card {
	label: string;
	fee: string;
	discountedFee?: string | null;
	feeType: string;
	radioValue: string;
	radioName: string;
	radioId: string;
	onClick: MouseEventHandler<HTMLInputElement>;
	cardContainer: string;
	radioButtonClass: string;
	onChange?: ChangeEventHandler<HTMLInputElement>;
	wordingList: string[];
}

const SubscriptionCard: React.FC<Card> = (props: Card): JSX.Element => (
	// eslint-disable-next-line jsx-a11y/no-static-element-interactions
	<div className={props.cardContainer} onClick={props.onClick}>
		<RadioButtonSvg class={props.radioButtonClass} />
		<label htmlFor={props.radioId}>{props.label}</label>
		<h2>
			{!props?.discountedFee && props.fee}
			{props?.discountedFee && (
				<>
					<span style={{ textDecoration: 'line-through', marginRight: '5px', color: 'red' }}>
						{props.fee}
					</span>
					<span>{props.discountedFee}</span>
				</>
			)}
			<small>{props.feeType}</small>
		</h2>
		<input
			id={props.radioId}
			name={props.radioName}
			onChange={props.onChange}
			type="radio"
			value={props.radioValue}
		/>
		<ol>
			{props.wordingList.map((question) => (
				<li key={question}>{question}</li>
			))}
		</ol>
	</div>
);

export default SubscriptionCard;