import { styled } from 'styleh-components'
import { media, fontValue } from '@skava/styleh-toolset'
import { IconWithText, StyledIcon, StyledText } from '@skava/ui/dist/components/molecules/IconWithText'
import { ProductItemList } from '../ProductItemList'

const StyledIconWithText = styled(IconWithText).attrs({
  dataQa: 'qa-store-header-wrapper',
} as {}) `
  padding: rem(24) 0 0;
  ${media.tabletOrSmaller `
    padding-top: rem(34);
  `}
  ${media.phoneOrSmaller `
    padding: rem(24) 0 0;
  `}
  ${StyledText} {
    font: ${fontValue(20, 'semi')};
    ${media.tabletOrSmaller `
      font: ${fontValue(18, 'semi')};
    `}
  }
  ${StyledIcon} {
    width: rem(28);
    height: rem(28);
    ${media.tabletOrSmaller `
      width: rem(24);
      height: rem(24);
    `}
  }
`

const StyledProductItemList = styled(ProductItemList).attrs({
  dataQa: 'qa-grouped-products-wrapper',
} as {})`
  flex: 1;
  padding-top: rem(12);
  ${media.phoneOrSmaller `
    padding-top: rem(18);
  `}
`

export {
  StyledIconWithText,
  StyledProductItemList,
}