import styled from 'styled-components';

import CheckIcon from '../../../assets/img/icon/icon-chk.png';

const AuthCheckBox = props => {
	//console.log(props.defaultChecked);
	return (
		<>
			<CheckBoxStyle>
				<InputCheck
					type="checkbox"
					name={props.name}
					className="input-check"
					id={props.id}
					disabled={props.disabled}
					onChange={e => props.setData && props.setData(e)}
					checked={props.checked !== undefined ? props.checked : false}
					// defaultChecked={props.defaultChecked}
					onClick={props.handleCheck && props.handleCheck}
				/>
				<Label htmlFor={props.id}>{props.label}</Label>
			</CheckBoxStyle>
		</>
	);
};

export default AuthCheckBox;

const CheckBoxStyle = styled.div`
	display: inline-flex;
	align-items: center;
	justify-content: center;
`;
const InputCheck = styled.input`
	position: absolute;
	opacity: 0;
	&:checked + label:before, &:disabled + label:before {
		background: url(${CheckIcon}) no-repeat;
		background-position: -32px 0px;
	}
`;

const Label = styled.label`
	position: relative;
	display: inline-block;
	cursor: pointer;
	padding-left: 21px;
	font-weight: 600;
	width: max-content;
	&:before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		left: 0;
		width: 16px;
		height: 16px;
		overflow: hidden;
		vertical-align: middle;
		background: url(${CheckIcon}) no-repeat;
		background-position: 0px 0px;
	}
`;
