import React from 'react'
import PropTypes from 'prop-types'
import { ActivityIndicator } from '../ActivityIndicator/ActivityIndicator'
import { Typography } from '../Typography/Typography'
import { Box } from '../Box/Box'
import { StackView } from '../StackView/StackView'

export const Loading = React.forwardRef(({ label }, ref) => (
  <Box space={3} ref={ref}>
    <StackView direction="row" space={2} tokens={{ alignItems: 'center' }}>
      <ActivityIndicator variant={{ size: 'large' }} />
      <Typography>{label}</Typography>
    </StackView>
  </Box>
))

Loading.displayName = 'Loading'

Loading.propTypes = { label: PropTypes.string }