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(RectanglePlaceholder) `
  ${buttonStyle};
`

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

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

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