import React, { useState } from 'react';
import {
	Container,
	Form,
	FormControl,
	FormGroup,
	Input,
	Divider,
	Icon,
} from 'rsuite';
import { DateTime } from 'luxon';

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

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>
			</Form>
		</Container>
	);
}