import React from 'react';
import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';

import TimezonePicker from '../components/General/TimezonePicker';
import DaySelector from '../components/Schedule/DaySelector';
import DurationSelector from '../components/Schedule/DurationSelector';
import SelectedDates from '../components/Schedule/SelectedDates';

export default function Schedule() {
	return (
		<Container>
			<h3>Schedule a meeting</h3>
			<Form>
				<FormGroup>
					<FormControl name='title' type='text' placeholder='title' />
				</FormGroup>
				<FormGroup>
					<Input
						name='description'
						componentClass='textarea'
						type='text'
						rows={3}
						placeholder='Description'
					/>
				</FormGroup>
				<FormGroup>
					<TimezonePicker />
				</FormGroup>
				<FormGroup style={{ width: 200 }}>
					<DurationSelector />
				</FormGroup>
				<FormGroup>
					<DaySelector />
				</FormGroup>
				<FormGroup>
					<SelectedDates />
				</FormGroup>
			</Form>
		</Container>
	);
}