import { styled } from 'styleh-components'
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: var(--color-blue);
    margin: 0;
    font-size: 14px;
  }
  ${ButtonIcon} {
    margin: 0;
    display: flex;
    align-items: center;
    svg{
      fill: var(--color-blue);
    }
  }
`
const StyledText = styled.div`
  margin-right: 25px;
`
const StyledCount = styled.span.attrs({
  'data-qa': 'qa-count',
})`
  font-size: 16px;
  font-weight: bold;
  color: var(--color-black);
  font-weight: 700;
`
const StyledItemText = styled.withComponent(StyledCount)`
  text-transform: capitalize;
`
const StyledAddonText = StyledCount

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