import React from 'react'
import { RectanglePlaceholder } from 'atoms/Placeholder'
import { ActionButtonProps } from './typings'
import {
  ActionButtonWrapper,
  ActionButtonPanel,
  ActionButtonItem,
} from './styled'

function renderButtons(props: ActionButtonProps) {
  return (
    <ActionButtonPanel>
      <ActionButtonItem>
        <RectanglePlaceholder
          width="100%"
          height={44}
          isDynamicViewBox={true}
        />
      </ActionButtonItem>
      <ActionButtonItem>
        <RectanglePlaceholder
          width="100%"
          height={44}
          isDynamicViewBox={true}
        />
      </ActionButtonItem>
    </ActionButtonPanel>
  )
}

function renderWrapper(props: ActionButtonProps) {
  const { className, children } = props
  return (
    <ActionButtonWrapper className={className}>{children}</ActionButtonWrapper>
  )
}

export { renderWrapper, renderButtons }