//export const Dialogue: React.FC<Props> = ({children, close, isVisible, title}: Props) => {
// import { useRef } from 'react'
import CheckOption from '../CheckOption';
interface CommunicationsArgs {
	registrationStep?: string;
	commAdministrative?: boolean;
	commNews?: boolean;
	commDeveloper?: boolean;
	onCommNews: Function;
	onCommAdministrative: Function;
	onCommDeveloper: Function;
}
export default function Communications( {
	registrationStep,
	onCommAdministrative,
	onCommNews,
	onCommDeveloper,
	commAdministrative,
	commNews,
	commDeveloper,
}: CommunicationsArgs ) {
	return (
		<fieldset className="max-w-sm">
			<legend className="text-white mb-2">
				Communication preferences -
			</legend>
			<div className="space-y-5">
				<CheckOption
					disabled={ 'register' !== registrationStep }
					checked={ commAdministrative }
					onChange={ onCommAdministrative }
					name="administrative"
					title="Administrative"
					description="Adminmistrative notifications"
				/>
				<CheckOption
					disabled={ 'register' !== registrationStep }
					checked={ commNews }
					onChange={ onCommNews }
					name="information"
					title="News & information"
					description="Tips and tricks on how to use this and related products"
				/>
				<CheckOption
					disabled={ 'register' !== registrationStep }
					checked={ commDeveloper }
					onChange={ onCommDeveloper }
					name="devel"
					title="Developer notices"
					description="Notification of updates to services plugins and API's"
				/>
			</div>
		</fieldset>
	);
}