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

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

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

const StyledTextPlaceholder = styled(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,
}