import { styled } from 'uxui-modules/view-container'
import {
  CirclePlaceholder,
  TextPlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'

const ProductTitle = styled.withComponent(TextPlaceholder) `
  margin-bottom: 8px;
`

const ProductPrice = styled.withComponent(TextPlaceholder) `
  margin-bottom: 24px;
`

const ProductOptions = styled.withComponent(TextPlaceholder) `
  margin-bottom: 8px;
`

const ProductQuantity = styled.withComponent(RectanglePlaceholder) ``

const ProductOptionsBox = styled.div `
  display: flex;
  flex-direction: column;
  width: 350px;
  border-top: 1px solid #a6afc1;
  border-bottom: 1px solid #a6afc1;
  padding-bottom: 24px;
  padding-top: 24px;

  @tablet-or-smaller() {
    width: 100%;
  }
`

const StyledFrequency = styled.div `
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 24px;
`

const StyledHeading = styled.withComponent(TextPlaceholder) `
  margin-bottom: 8px;
`

const FrequencyDropDown = styled.withComponent(RectanglePlaceholder) `
  width: 600px;

  @tablet-or-smaller() {
    width: 100%;
  }
`

const RadioOption = styled.div `
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8px;
`

const StyledDate = styled.withComponent(RectanglePlaceholder) `
  margin-left: 16px;
`

const SubscriptionEnds = styled.div `
  display: flex;
  flex-direction: column;
  width: 350px;
  padding-top: 24px;
  padding-bottom: 16px;
  border-top: 1px solid #a6afc1;
  border-bottom: 1px solid #a6afc1;

  @tablet-or-smaller() {
    width: 100%;
  }
`

const Wrapper = styled.section `
  display: flex;
  flex-direction: column;
  width: 100%;
`

export {
  ProductTitle,
  ProductPrice,
  ProductOptions,
  ProductQuantity,
  ProductOptionsBox,
  StyledHeading,
  FrequencyDropDown,
  StyledFrequency,
  RadioOption,
  StyledDate,
  SubscriptionEnds,
  Wrapper,
}