import { Grid, Typography, FormControlLabel, Checkbox } from '@mui/material';

const SortShippingMethods = ({ state = {}, handleChange = (name = '', val = '') => {} }) => {
	return (
		<Grid container spacing={1} flex mt={3} mb={0}>
			<Grid item flex={1} xs={4}>
				<Typography variant='subtitle1' fontWeight='bold'>
					Don't sort shipping methods by price
				</Typography>
			</Grid>

			<Grid item flex={2} xs={8}>
				<FormControlLabel
					control={
						<Checkbox
							checked={state?.dont_sort_shipping_methods || false}
							onChange={e =>
								handleChange('dont_sort_shipping_methods', e.target.checked)
							}
						/>
					}
					label='By default, the plugin will sort all shipping methods by price in ascending order.'
					title='By default, the plugin will sort all shipping methods by price in ascending order.'
				/>
			</Grid>
		</Grid>
	);
};

export default SortShippingMethods;