import { Tabs } from 'antd';
import Background from 'client/Elements/Background';
import { Box, Flex } from 'client/UIKit/grid';
import React from 'react';
import styled from 'styled-components';
import SectionsList from './list';
import withTitle from 'client/hocs/withTitle';
import mq from 'client/UIKit/mq';

const { TabPane } = Tabs;

const InputWrapper = styled(Box)`
  width: 100%;
  ${mq.desktop`width:200px`}
  margin: 8px 8px;
`;

const Sections = props => (
  <Background flex="3 1 25rem">
    <Tabs type="line">
      {SectionsList.map(({ title, elements }, i) => (
        <TabPane tab={title} key={i}>
          <Flex alignItems="flex-end" flexWrap="wrap">
            {elements.map(({ title, Component, props }, ie) => {
              return (
                <InputWrapper key={ie}>
                  {withTitle(title)(Component)(props)}
                </InputWrapper>
              );
            })}
          </Flex>
        </TabPane>
      ))}
    </Tabs>
  </Background>
);

export default Sections;