import { styled } from 'styleh-components'
import { Label, LabelElement } from 'atoms/Text/Label'

const PriceWrapper = styled.section `
  position: relative;
`

const LabelSpan = LabelElement.as('span')

const SalePrice = styled.withComponent(LabelSpan).attrs({
  'data-qa': 'qa-sale-price',
}) `
  position: relative;
  color: var(--color-red);
  margin-right: 5px;
`

const RegularPrice = styled.withComponent(LabelSpan).attrs({
  'data-qa': 'qa-reg-price',
}) `
  position: relative;
  color: #1e1e1e;
  ${props =>
    props.isSalePrice &&
    styled.css `
      text-decoration: line-through;
    `};
`

export { PriceWrapper, SalePrice, RegularPrice }