<gh_stars>1-10
import React from 'react';
import Button from '@vkontakte/vkui/dist/components/Button/Button';
import Group from '@vkontakte/vkui/dist/components/Group/Group';
import { FormItem, FormLayout, Input, Textarea } from '@vkontakte/vkui';

function AddTickets({form, onChange}) {
    return (
        <Group>
			<FormLayout>
				<FormItem
					bottom={'Поле должно содержать не менее 5 символов: ' + form.head.length + '/50'}
				>
					<Input 
						placeholder="Пожалуйста, опишите вашу проблему в двух словах..."
						maxLength='50'
						name='head'
						value={form.head}
						onChange={onChange}
					/>
				</FormItem>
				<FormItem
					width="300px"
					bottom={'Поле должно содержать не менее 10 символов: ' + form.body.length + '/2000'}
				>
					<Textarea 
						placeholder="Пожалуйста, расскажите о вашей проблеме чуть подробнее..."
						maxLength='2000'
						name='body'
						value={form.body}
						onChange={onChange}
					/>
					</FormItem>
					<FormItem>
						<Button size="l" stretched mode="primary">Создать вопрос</Button>
					</FormItem>
			</FormLayout>
		</Group>
    );
}


export default AddTickets;