import { styled } from 'uxui-modules/view-container'
import { Button } from 'atoms/Button'
import { InformationCard } from 'organisms/InformationCard'
import { HeaderWrapper as Header } from 'abstractions/Subscription/ShippingAddressCard'

const HeaderWrapper = styled.withComponent(Header) `
  text-transform: capitalize;
  ${props =>
    props.isExpanded &&
    styled.css `
      ${HeaderToggleButton} {
        /* display: none; */
      }
    `};
`

const HeaderContent = styled.div ``

const HeaderToggleButton = styled.withComponent(Button) `
  color: #159fd5;
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
`

const StyledInformationCard = styled.withComponent(InformationCard) `
  margin: 8px 0 16px;
`

const StyledshippingAddress = styled.div ``

export {
  HeaderWrapper,
  HeaderContent,
  HeaderToggleButton,
  StyledInformationCard,
  StyledshippingAddress,
}