import { styled } from 'view-container'
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'
import { Header as HeaderPlaceHolder } from 'abstractions/BundleProduct/CheckoutCartBundle'

const Header = styled.withComponent(HeaderPlaceHolder) ``

const StyledViewButton = styled.withComponent(Button).attrs({
  'data-qa': 'qa-view-details'
}) `
  background: transparent;
  border: none;
  padding: 0;

  ${ButtonLabel} {
    text-transform: lowercase;
    color: #159FD5;
    margin: 0;
    font-size: 14px;
  }
  ${ButtonIcon} {
    margin: 0;
    display: flex;
    align-items: center;
    svg, path{
      fill: #159FD5;
    }
    svg {
      width: 12px;
    }
  }
`
const StyledText = styled.div `
  margin-right: 25px;
`
const StyledCount = styled.span.attrs({
  'data-qa': 'qa-count',
}) `
  font-size: 16px;
  font-weight: bold;
  color: #2c2c2c;
  font-weight: 700;
`
const StyledItemText = StyledCount.extend `
  text-transform: capitalize;
`
const StyledAddonText = StyledCount.extend ``

export { Header, StyledViewButton, StyledText, StyledItemText, StyledAddonText }