import { styled } from 'styleh-components'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { ModalBox, ModalTitle } from 'organisms/Modal'
import { SocialIconList, IconLink } from 'molecules/SocialIconList'
import { StyledBaseText } from 'atoms/Text'

const StyledModalBox = styled.withComponent(ModalBox)`
  width: rem(600);
  padding: rem(12);
`
const StyledModalTitle = styled.withComponent(ModalTitle).attrs({
  'data-qa': 'qa-popup-title',
})`
  text-transform: capitalize;
  padding: 0;
  border: 0;
`
const StyledText = StyledBaseText.as('span')

const StyledListName = styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-list-name',
})`
  text-transform: capitalize;
`

const FlexCenter = styled.div`
  display: flex;
  align-items: center;
  padding-bottom: rem(16);
`

const StyledSocialIconList = styled.withComponent(SocialIconList)`
  position: absolute;
  bottom: rem(10);
  ${IconLink} {
    width: rem(24);
    height: rem(24);
    padding: 0;
  }

  .svg-icon-pinteresticon-withoutbg, .svg-icon-twittericon {
    transform: scale(0.7, 0.7);
    transform-origin: center;
  }

  @phone-or-smaller() {
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: center;
  }
`
const StyledShareIcon = styled.withComponent(MaterialIcon).attrs({
  'data-qa': 'qa-list-share',
}) `
  width: rem(22);
  height: rem(22);
  cursor: pointer;
  margin-right: rem(54);
  @phone-or-smaller() {
    margin-right: rem(24);
  }
`

const Wrapper = styled.div`
  margin: 0;
  display: flex;
  align-items: center;
`

export {
  StyledModalBox,
  StyledModalTitle,
  StyledListName,
  FlexCenter,
  StyledSocialIconList,
  Wrapper,
  StyledShareIcon,
}