import { Grid, Typography, Box, TextField } from '@mui/material';
import DESCRIPTIONS from '../constants/descriptions';

const LabelAs = ({
	state = {},
	handleChange = (name = '', val = '') => {},
	heading = '',
	showHelpText = true,
}) => {
	return (
		<Grid container spacing={1} flex mt={2} mb={3}>
			<Grid item flex={1} xs={4}>
				<Typography variant='subtitle1' fontWeight='bold'>
					General
				</Typography>
				<p>
					<strong>Label as</strong> - {DESCRIPTIONS.label_as}
				</p>
			</Grid>
			<Grid item flex={2} xs={8} mt={3}>
				<Box component='form'>
					<Box
						component='div'
						sx={{
							display: 'flex',
							flexDirection: 'column',
							gap: 3,
						}}>
						<TextField
							label='Label as'
							title='Label as'
							variant='standard'
							InputLabelProps={{ shrink: true }}
							inputProps={{ maxLength: 50 }}
							fullWidth
							value={state?.label_as}
							onChange={e => handleChange('label_as', e.target.value)}
						/>
					</Box>
				</Box>
			</Grid>
		</Grid>
	);
};

export default LabelAs;