import React from 'react'
import { useLocale } from '../locale/index.js'

export const EmptyState = ({
  message,
  as: Element = 'span',
  style = {},
  ...props
}) => {
  const { t } = useLocale()
  const displayMessage = message ?? t('design-system.emptyState.message')

  return (
  <Element
    data-empty-state
    style={{
      display: 'block',
      fontSize: '12px',
      color: 'var(--text-muted-color, hsl(0, 0%, 55%))',
      padding: '12px 20px',
      ...style,
    }}
    {...props}
  >
    {displayMessage}
  </Element>
  )
}