import React, { useContext } from 'react'
import { WizardContext } from '../context/wizardStore'
import Required from './required'

import Form from 'react-bootstrap/Form'

export default function Contact() {
  const { state, onChangeEvent } = useContext(WizardContext)

  const { purpose, destination, org } = state.formData

  return (
    <>
      <Form.Group>
        <Form.Label>
          Zweck der Fahrt <Required />
        </Form.Label>
        <Form.Control
          type="text"
          name="purpose"
          placeholder="Zweck der Fahrt"
          value={purpose}
          onChange={onChangeEvent}
          required
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Verein</Form.Label>
        <Form.Control
          type="text"
          name="org"
          placeholder="Verein"
          value={org}
          onChange={onChangeEvent}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>
          Ziel der Fahrt <Required />
        </Form.Label>
        <Form.Control
          type="text"
          name="destination"
          placeholder="Fahrtziel"
          value={destination}
          onChange={onChangeEvent}
          required
        />
      </Form.Group>
    </>
  )
}