import { styled } from 'styleh-components'
import ExpandableCard from 'organisms/ExpandableCard'
import {
  SquarePlaceholder,
  TextPlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'

const ToggleItemWrapper = styled.div`
  display: flex;
  align-items: center;
`

const StyledCheckBox = styled.withComponent(SquarePlaceholder)`
  margin-right: rem(18);
  border-radius: rem(2);
`
const StyledTextBox = styled.withComponent(TextPlaceholder)``

const StyledCommentBox = styled.section`
  display: flex;
  flex-direction: column;
  @phone-or-smaller() {
    width: 100%;
    margin: rem(16) 0 0;
  }
`

const StyledTextArea = styled.withComponent(RectanglePlaceholder)`
  border-radius: rem(4);
`

const ButtonGroup = styled.div`
  display: flex;
  margin: rem(16) rem(-8) 0;
  @phone-or-smaller() {
    flex-direction: column;
    margin: 0;
  }
`

const StyledButton = styled.withComponent(RectanglePlaceholder)`
  margin: 0 rem(8);
  border-radius: rem(4);
  @phone-or-smaller() {
    margin: rem(8) 0 0;
  }
`

const StyledExpandableCard = styled.withComponent(ExpandableCard).attrs({
  'data-qa': 'qa-delivery-instructions-container',
})``

export {
  ToggleItemWrapper,
  StyledCheckBox,
  StyledTextBox,
  StyledCommentBox,
  ButtonGroup,
  StyledTextArea,
  StyledButton,
  StyledExpandableCard,
}