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

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

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

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

const StyledTextArea = styled(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(RectanglePlaceholder) `
  margin: 0 rem(8);
  border-radius: rem(4);
  @phone-or-smaller() {
    margin: rem(8) 0 0;
  }
`

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

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