import { styled } from 'styleh-components'
import {
  DetailedListItemPanel,
  DetailedListValue,
} from '@skava/ui/dist/components/molecules/DetailedList'
import {
  ProductImage,
  ProductName,
  ProductFacets,
  ProductDescription,
  ProductImageSection,
  ProductPrice,
} from 'presets/ProductPieces'
import { H3 } from '@skava/ui/dist/components/atoms/Text'
import { Link } from '@skava/ui/dist/components/atoms/Link'

const StyledProductName = styled(ProductName).attrs({
  'data-qa': 'qa-brand-name',
}) `
  font-size: rem(20);
  font-weight: 700;
  color: var(--color-black);
  margin: 0;
  margin-bottom: rem(4);
`

const StyledProductFacets = styled(ProductFacets).attrs({
  'data-qa': 'qa-sku-id',
}) `
  color: #717c95;
  font-size: rem(14);
  margin-bottom: rem(8);
  ${H3} {
    display: none;
  }
  @tablet-or-smaller() {
    ${DetailedListItemPanel} {
      flex-direction: row;
    }
    ${DetailedListValue} {
      margin: 0;
      margin-left: 10px;
    }
  }
`

const StyledProductDescription = styled(ProductDescription).attrs({
  'data-qa': 'qa-product-title',
}) `
  color: #717c95;
  font-size: rem(16);
  margin: 0;
  margin-bottom: rem(8);
`

const StyledProductImage = styled(ProductImage).attrs({
  'data-qa': 'qa-product-image',
}) `
  ${ProductImageSection} {
    width: 100%;
    height: rem(140);
    background: transparent;
  }
`

const StyledProductPrice = styled(ProductPrice).attrs({
  'data-qa': 'qa-price',
}) ``

const ProductNavigationLink = styled(Link) `
  text-decoration: none;
`

export {
  StyledProductName,
  StyledProductFacets,
  StyledProductDescription,
  StyledProductImage,
  StyledProductPrice,
  ProductNavigationLink,
}