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 }