import { FormField } from './FormField';

export const CheckInput = ( {
	id,
	label,
	name,
	disabled = false,
	isChecked = false,
	variant = 'side-label',
	value,
	setValue,
	helper = '',
	onClick = () => {},
} ) => {
	return (
		<FormField
			id={ id }
			helper={ helper }
			onClick={ onClick }
			variant={ variant }
		>
			{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
			<label className="tasty-checkbox-container">
				<input
					type="checkbox"
					name={ name }
					id={ id }
					disabled={ disabled }
					checked={ Boolean( isChecked ) }
					value={ value }
					onChange={ ( e ) => {
						setValue( e.target.checked );
					} }
				/>
				{ label }
				<span className="tasty-checkmark"></span>
			</label>
		</FormField>
	);
};
