import React from 'react'

type EllipsisProps = {
  /** Optional prop to add a test id to the Ellipsis for QA testing */
  qaTestId?: string
}

const Ellipsis = ({
  qaTestId = 'ellipsis',
}: EllipsisProps): React.JSX.Element => {
  return (
    <span data-testid='ellipsis-component' qa-test-id={qaTestId}>
      <span className='animate-ellipsis'>.</span>
      {/* Tailwind does not provide animation-delay. 100ms delay for staggered effect */}
      <span className='animate-ellipsis [animation-delay:100ms]'>.</span>
      {/* Tailwind does not provide animation-delay. 200ms delay for staggered effect */}
      <span className='animate-ellipsis [animation-delay:200ms]'>.</span>
    </span>
  )
}

export default Ellipsis