import Background from 'Components/Layout/Background';
import styled from 'styled-components';
import { min } from 'styles/mq';
import renderFormRows from '../lib/render-rows';
import { rows } from './config';

const Wrapper = styled(Background)`
  padding: 4px 10px;

  ${min('tablet')} {
    min-height: 790px;
  }

  ${min('laptop')} {
    padding: 4px 18px 10px;
  }
`;

export default function Settings() {
  return <Wrapper>{renderFormRows(rows)}</Wrapper>;
}