import React, { useContext } from 'react'
import { WizardContext } from './context/wizardStore'
import Input from '../input'

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

  const { name, email, street, zip, city } = state.formData

  return (
    <>
      <Input
        label="Name"
        required
        name="name"
        value={name}
        onChange={onChangeEvent}
      />
      <Input
        label="E-Mail"
        type="email"
        name="email"
        value={email}
        onChange={onChangeEvent}
        required
      />
      <Input
        label="Straße"
        name="street"
        value={street}
        onChange={onChangeEvent}
        required
      />
      <Input
        label="PLZ"
        name="zip"
        value={zip}
        onChange={onChangeEvent}
        required
      />
      <Input
        label="Stadt"
        name="city"
        value={city}
        onChange={onChangeEvent}
        required
      />
    </>
  )
}