import { styled } from 'styleh-components'
import { Button } from 'atoms/Button'
import { SocialIconList, IconLink } from 'molecules/SocialIconList'

const ShareWrapper = styled.div ``

const ShareHeader = styled.div ``
const IconListPanel = styled.li.attrs({
  className: 'social-icons',
})`
  position: relative;
  display: inline-flex;
`
const SocialIconListContainer = styled.withComponent(SocialIconList) `
`

const StyledSocialIconButton = styled.withComponent(Button).attrs({
  'data-qa': 'qa-copy-link-button',
  'aria-label': 'Copy link button',
})`
  ${IconLink.componentStyle.rules};
  background: $colors-greyblue;
  border: 0;
`

export {
  StyledSocialIconButton,
  ShareWrapper,
  ShareHeader,
  IconListPanel,
  SocialIconListContainer,
}