import React from 'react'
import { Header as HeaderPlaceholder } from 'abstractions/BundleCollection'

const Title = styled.span.attrs({
  'data-qa': 'qa-product-heading'
})  `
  width: 85%;
  font-size: 24px;
  color: #2c2c2c;
  font-weight: bold;
`
const ItemCount = styled.span.attrs({
  'data-qa': 'qa-count'
}) `
  font-size: 14px;
  color: #2c2c2c;
`
const Header = styled.withComponent(HeaderPlaceholder)`
  font: $font-regular-extra-small;
  text-transform: capitalize;
  flex-direction: column;
  align-items: unset;
`

export { Header, Title, ItemCount }