import { styled } from 'styleh-components'
import Button from 'atoms/Button'

const StyledButton = styled.withComponent(Button) `
  width: 100%;
  height: rem(44);
  border: none;
  padding: 0 rem(8);
  border-radius: rem(4);
  font-size: rem(18);
  text-transform: capitalize;
  margin: 0 rem(8);
`

const StyledSubmitButton = styled.withComponent(StyledButton) `
  background-color: #03abb8;
  color: #ffffff;
`

const StyledCancelButton = styled.withComponent(StyledButton) `
  background-color: transparent;
  border: 1px solid grey;
  color: #2c2c2c;
`

const FormWrapper = styled.section `
  .comment-box-wrapper {
    display: flex;
  }
  .comment-box {
    width: 100%;
    height: rem(200);
    resize: none;
    padding: rem(8);
    font-size: rem(18);
    &::placeholder {
      font-style: italic;
    }
  }
  .button-group {
    display: flex;
    flex: 0 0 100%;
    margin: rem(8) rem(-8) 0;
  }
`

export { FormWrapper, StyledSubmitButton, StyledCancelButton }