/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Container = styled.div`
  position: relative;
  margin-top: 28px;
  margin-bottom: 28px;

  &:first-child {
    margin-top: 0px;
  }
`;

const TitleAndTools = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  align-items: center;
  height: 30px;
  margin-bottom: 28px;
`;

const Title = styled.h2`
  flex: 1 1 auto;
  color: ${({ theme }) => theme.colors.fg.white};
  margin: 0;
  font-family: ${({ theme }) => theme.fonts.label.family};
  font-size: ${({ theme }) => theme.fonts.label.size};
  font-weight: 500;
  line-height: ${({ theme }) => theme.fonts.label.lineHeight};
`;

const Tools = styled.div`
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
`;

export default function Section({ title, titleTools, children, ...rest }) {
  return (
    <Container {...rest}>
      {(title || titleTools) && (
        <TitleAndTools>
          {title && <Title>{title}</Title>}
          {titleTools && <Tools>{titleTools}</Tools>}
        </TitleAndTools>
      )}
      {children}
    </Container>
  );
}

Section.propTypes = {
  title: PropTypes.string.isRequired,
  titleTools: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
};

@@ -846,170 +846,8 @@
 %60;%0A%0A
-const TitleAndTools = styled.div%60%0A  display: flex;%0A  flex-direction: row;%0A  flex-wrap: no-wrap;%0A  align-items: center;%0A  height: 30px;%0A  margin-bottom: 28px;%0A%60;%0A%0A
 cons
@@ -939,21 +939,8 @@
 e%7D;%0A
-  margin: 0;%0A
   fo
@@ -1136,183 +1136,26 @@
 t%7D;%0A
-%60;%0A%0Aconst Tools = styled.div%60%0A  flex: 0 0 auto;%0A  display: flex;%0A  flex-direction: row;%0A  flex-wrap: no-wrap;%0A  justify-content: center;%0A  align-items: center;%0A  margin-left: 
+  margin-bottom: 2
 8px;
@@ -1203,20 +1203,8 @@
 tle,
- titleTools,
  chi
@@ -1271,392 +1271,141 @@
    %7B
-(title %7C%7C titleTools) && (%0A        %3CTitleAndTools%3E%0A          %7Btitle && %3CTitle%3E%7Btitle%7D%3C/Title%3E%7D%0A          %7BtitleTools && %3CTools%3E%7BtitleTools%7D%3C/Tools%3E%7D%0A        %3C/TitleAndTools%3E%0A      )%7D%0A      %7Bchildren%7D%0A    %3C/Container%3E%0A  );%0A%7D%0A%0ASection.propTypes = %7B%0A  title: PropTypes.string.isRequired,%0A  titleTools: PropTypes.oneOfType(%5B%0A    PropTypes.arrayOf(PropTypes.node),%0A    PropTypes.node,%0A  %5D)
+title && %3CTitle%3E%7Btitle%7D%3C/Title%3E%7D%0A      %7Bchildren%7D%0A    %3C/Container%3E%0A  );%0A%7D%0A%0ASection.propTypes = %7B%0A  title: PropTypes.string.isRequired
 ,%0A  

remove dead code