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

const ShippingClasses = ({ 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'>
					Ignore items with the following Shipping Class(es)
				</Typography>
			</Grid>
			<Grid item flex={2} xs={8}>
				<TextField
					label=''
					variant='standard'
					helperText={`Enter the Shipping Slug you'd like the plugin to ignore. Use commas to separate multiple Shipping Slug.`}
					InputLabelProps={{ shrink: true }}
					inputProps={{ maxLength: 50 }}
					fullWidth
					value={state?.shipping_classes}
					onChange={e => handleChange('shipping_classes', e.target.value)}
				/>
			</Grid>
		</Grid>
	);
};

export default ShippingClasses;