import styled from 'styled-components';
import RadioIcon from '../../../assets/img/icon/icon-radio.png';

const RadioInput = ({ label, id, name, value, fontSize, fontWeight, checked, handleChange, handleClick, disabled }) => {
	return (
		<>
			<RadioWrapper fontSize={fontSize} fontWeight={fontWeight} onClick={handleClick}>
				<input type="radio" name={name} id={id} value={value} checked={checked} onChange={handleChange} disabled={disabled} />
				<label htmlFor={id}>{label}</label>
			</RadioWrapper>
		</>
	);
};

export default RadioInput;

const RadioWrapper = styled.div`
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 5px;
	label {
		position: relative;
		display: inline-block;
		cursor: pointer;
		padding-left: 20px;
		width: max-content;
		font-size: ${props => props.fontSize || '14px'};
		font-weight: 600;
		&:before {
			content: '';
			display: inline-block;
			position: absolute;
			top: 50%;
			transform: translate(0, -50%);
			left: 0;
			width: 14px;
			height: 14px;
			vertical-align: middle;
			background: url('${RadioIcon}') no-repeat;
		}
	}
	input {
		position: absolute;
		opacity: 0;
		&:checked + label:before {
			background: url('${RadioIcon}') no-repeat;
			background-position: -14px 0;
		}
	}
`;
