import { styled } from 'uxui-modules/view-container'
import { Heading } from 'atoms/Text'
import { ToggleList } from 'molecules/ToggleList'
import { SelectDropDown } from 'molecules/SelectDropDown'
import { ProductName, ProductPrice } from 'presets/ProductPieces'
import { Quantity, StyledTitle } from 'presets/Quantity'
import { IncrementerWrapper } from 'src/inputs/Incrementer'

const StyledProductTitle = styled.withComponent(ProductName)`
  margin: 0;
`
const StyledProductPrice = styled.withComponent(ProductPrice)`
  font-size: 20px;
  font-weight: bold;
  margin-bottom: rem(16);
`
const StyledProductOptions = styled.div``
const StyledProductOptionsLabel = styled.span`
  font-weight: 500;
`
const StyledProductOptionsValue = styled.span``
const StyledProductQuantity = styled.div``
const StyledQuantityLabel = styled.span`
  font-weight: 500;
`
const StyledQuantityValue = styled.span``
const StyledHeading = styled.withComponent(Heading)`
  color: #2c2c2c;
  text-transform: capitalize;
  margin: 0;
  margin-bottom: rem(8);
`
const StyledSelectDropdown = styled.withComponent(SelectDropDown)`
  width: 100%;
`

const StyledQuantity = styled.withComponent(Quantity)`
  width: 100px;

  ${IncrementerWrapper} {
    padding: 10px;
    border: 1px solid #A6AFC1;
    border-radius: 4px;
  }
`

export {
  StyledProductTitle,
  StyledProductPrice,
  StyledProductOptions,
  StyledProductOptionsLabel,
  StyledProductOptionsValue,
  StyledProductQuantity,
  StyledQuantityLabel,
  StyledQuantityValue,
  StyledHeading,
  StyledSelectDropdown,
  StyledQuantity,
}