import React from 'react'
import { UserCommentProps } from './typings'
import {
  ActionButton,
  CommentBox,
  ButtonWrapper,
  CommentBoxWrapper,
  Wrapper,
} from './styled'

function defaultRenderFormFields(props: UserCommentProps) {
  return (
    <React.Fragment>
    <CommentBoxWrapper>
      <CommentBox height={140} />
    </CommentBoxWrapper>
    <ButtonWrapper>
      <ActionButton height={50} />
      <ActionButton height={50} />
    </ButtonWrapper>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: UserCommentProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderFormFields,
  defaultRenderWrapper,
}