import React from 'react'
import { styled } from 'styleh-components'
import { Header as HeaderPlaceholder } from 'abstractions/BundleCollection'

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

export { Header, Title, ItemCount }