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

export default function Contact() {
  // @ts-expect-error ts-migrate(2339) FIXME: Property 'state' does not exist on type '{}'.
  const { state, onChangeEvent } = useContext(WizardContext)

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

  return (
    <>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">
            Name <Required />
          </label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={onChangeEvent}
            required
            className="input-text"
          />
        </div>
      </div>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">
            E-Mail <Required />
          </label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={onChangeEvent}
            required
            className="input-text"
          />
        </div>
      </div>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">
            Straße <Required />
          </label>
          <input
            type="text"
            name="street"
            value={street}
            onChange={onChangeEvent}
            required
            className="input-text"
          />
        </div>
      </div>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">
            PLZ <Required />
          </label>
          <input
            type="text"
            name="zip"
            value={zip}
            onChange={onChangeEvent}
            required
            className="input-text"
          />
          <label className="flabel">
            Stadt <Required />
          </label>
          <input
            type="text"
            name="city"
            value={city}
            onChange={onChangeEvent}
            required
            className="input-text"
          />
        </div>
      </div>
    </>
  )
}