import {
	Box,
	FormControl,
	FormControlLabel,
	FormLabel,
	Grid,
	Radio,
	RadioGroup,
	Typography,
} from '@mui/material';

const SignatureRequired = ({ state = {}, handleChange = (name = '', val = '') => {} }) => {
	return (
		<Grid container spacing={1} flex mt={3} mb={3}>
			<Grid item flex={1} xs={4}>
				<Typography variant='subtitle1' fontWeight='bold'>
					Signature options
				</Typography>
			</Grid>
			<Grid item flex={2} xs={8}>
				<Box component='form'>
					<Box component='div'>
						<FormControl>
							<FormLabel id='signature-required-radio-group-label'></FormLabel>
							<RadioGroup
								aria-labelledby='signature-required-radio-group-label'
								name='signature-required-radio-group'
								value={state?.signature_required || 'no_signature'}
								onChange={e => handleChange('signature_required', e.target.value)}>
								<FormControlLabel
									value='no_signature'
									control={<Radio />}
									label='Signature not required'
								/>
								<FormControlLabel
									value='signature'
									control={<Radio />}
									label='Signature required'
								/>
								<FormControlLabel
									value='adult_signature'
									control={<Radio />}
									label='Adult signature required'
								/>
							</RadioGroup>
						</FormControl>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default SignatureRequired;