import { styled } from 'styleh-components'
import {
  TextPlaceholder,
  RectanglePlaceholder,
  ParagraphPlaceholder
} from 'atoms/Placeholder'

const Paragraph = styled.withComponent(ParagraphPlaceholder)`
  margin-bottom: rem(8);
`

const Image = styled.withComponent(RectanglePlaceholder)`
  margin-bottom: rem(8);
`

const StyledTextPlaceholder = styled.withComponent(TextPlaceholder)`
  margin-bottom: rem(8);
`

const DetailSection = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
`

const ImageSection = styled.div`
  margin-right: rem(24);
  flex: 0 0 rem(160);

  @phone-or-smaller() {
    margin-right: rem(16);
    flex: 0 0 rem(124);
  }
`

const Wrapper = styled.section`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
`

export {
  Image,
  Paragraph,
  StyledTextPlaceholder,
  DetailSection,
  ImageSection,
  Wrapper,
}