import styled from 'styled-components'

const StyledForm = styled.form`
  display: grid;
  grid-template-columns: 1fr 20px 2fr;

  fieldset {
  }

  fieldset::after {
    padding: 30px;
    margin-bottom: 30px;
  }

  label {
    grid-column: 1;
  }

  input  {
    grid-column: 2/4;
  }

  input:radio {
    grid-column: 2;
  }

  button:submit {
    grid-column: 1/-1;
  }
`

const DemoForm = props => (
  <StyledForm>
    <fieldset title="User">
      <label htmlFor="name">Name</label>
      <input type="text" name="name" id="name" />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" />
      <label htmlFor="password">Name</label>
      <input type="password" name="password" id="password" />
    </fieldset>
    <fieldset>
      <label htmlFor="search">Search</label>
      <input type="search" name="search" id="search" />

    </fieldset>
    <button type="submit">Submit</button>
  </StyledForm>
)

export default DemoForm
export { StyledForm }