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

const buttonStyle = styled.css`
  width: rem(200);
  height: rem(44);

  @phone-or-smaller() {
    align-self: flex-end;
  }
`
const ButtonPlaceholder = styled.withComponent(RectanglePlaceholder)`
  ${buttonStyle};
`

const StatusPlaceholder = styled.withComponent(ParagraphPlaceholder)`
  margin-top: rem(24);
  width: rem(450);

  @tablet-or-smaller() {
    width: 100%;
    margin-bottom: rem(24);
  }
`

const Heading = styled.withComponent(TextPlaceholder)`
  width: rem(250);
  margin-left: rem(16);
`

const Title = styled.div`
  display: flex;
  align-items: center;
`

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

const StyledWrapper = styled.section`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  @tablet-or-smaller() {
    align-items: baseline;
  }

  @phone-or-smaller() {
    flex-direction: 'row';
  }
`

export {
  buttonStyle,
  ButtonPlaceholder,
  StatusPlaceholder,
  Heading,
  Title,
  LeftSection,
  StyledWrapper,
}