import { React } from 'react'
import { styled } from 'view-container'
import { RectanglePlaceholder, TextPlaceholder } from 'atoms/Placeholder'

const HeaderContent = styled.withComponent(TextPlaceholder) `
  margin-right: 24px;
`

const HeaderToggleButton = styled.withComponent(RectanglePlaceholder) ``

const Header = styled.div `
  display: flex;
  align-items: center;
  padding-bottom: rem(16);
  ${props =>
    props.isExpanded &&
    styled.css `
      border-bottom: 1px solid #a6afc1;
    `};

  @phone-or-smaller() {
    justify-content: space-between;
  }
`

export { HeaderContent, HeaderToggleButton, Header }