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

const options = [
	{ label: 'General Merchandise', value: '400' },
	{ label: 'Art & Antiques', value: '412' },
	{ label: 'Electronics', value: '404' },
	{ label: 'Fragile Items', value: '408' },
	{ label: 'Furniture & Large Items', value: '406' },
	{ label: 'Equipment', value: '401' },
	{ label: 'Controlled Items', value: '415' },
	{ label: 'Stonework', value: '407' },
	{ label: 'Food (Non-Perishable) / Beverages', value: '402' },
	{ label: 'Chemicals / Paint / Allied Products', value: '403' },
	{ label: 'Construction Materials', value: '405' },
	{ label: 'Perishables & Frozen', value: '409' },
	{ label: 'Motorized Transportation', value: '411' },
	{ label: 'Explosives', value: '413' },
	{ label: 'Life Forms', value: '414' },
	{ label: 'Pharmaceuticals (Non-Refrigerated)', value: '416' },
	{ label: 'Pharmaceuticals (Refrigerated)', value: '417' },
];

const InsuranceCategoryList = ({ state, handleChange }) => {
	return (
		<>
			{/* Rating method */}
			<Grid container spacing={1} flex mt={3} mb={3}>
				<Grid item flex={1} xs={4}>
					<Typography variant='subtitle1' fontWeight='bold'>
						Insurance category
					</Typography>
				</Grid>
				<Grid item flex={2} xs={8}>
					<Select
						fullWidth
						size='small'
						defaultValue='1'
						value={state?.insurance_category_list}
						onChange={e => handleChange('insurance_category_list', e.target.value)}>
						{options.map(option => (
							<MenuItem key={option.value} value={option.value}>
								{option.label}
							</MenuItem>
						))}
					</Select>
				</Grid>
			</Grid>
		</>
	);
};

export default InsuranceCategoryList;