import { styled } from 'styleh-components'
import { ExpandableCard } from 'organisms/ExpandableCard'

const ToggleButton = styled.div`
  position: absolute;
  right: rem(12);
  top: rem(12);
  z-index: 2;

  display: flex;
  cursor: pointer;
`

const StyledExpandableCard = styled.withComponent(ExpandableCard)``

const Wrapper = styled.section`
  position: relative;
  padding: rem(12);
  ${props => props.isExpanded && styled.css`
    box-shadow: 0 rem(4) rem(12) 0 rgba(0, 0, 0, 0.3);
  `}
`

export {
  ToggleButton,
  StyledExpandableCard,
  Wrapper,
}