import { styled } from 'styleh-components'
import { Button, ButtonText, ButtonIcon, StyledIcon } from '@skava/ui/dist/components/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;

  ${ButtonText} {
    text-transform: lowercase;
    color: var(--color-blue);
    margin: 0;
    font-size: 14px;
  }
  ${ButtonIcon} {
    margin: 0;
    display: flex;
    align-items: center;
    ${StyledIcon} {
      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 }