import React, { useState, useEffect } from 'react'
import { Box, Text } from 'ink'

/**
 * Custom emoji spinner that alternates between emojis
 * @param {Object} props
 * @param {string} props.label - Text to display next to the spinner
 * @param {string[]} props.emojis - Array of emojis to alternate between (default: ['💬', '💭'])
 * @param {number} props.interval - Milliseconds between emoji changes (default: 500)
 */
const EmojiSpinner = ({ 
  label = '', 
  emojis = ['💬', '💭'],
  interval = 500 
}) => {
  const [currentEmojiIndex, setCurrentEmojiIndex] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentEmojiIndex(prev => (prev + 1) % emojis.length)
    }, interval)

    return () => clearInterval(timer)
  }, [emojis, interval])

  return (
    <Box gap={1}>
      <Text>{emojis[currentEmojiIndex]}</Text>
      {label && <Text>{label}</Text>}
    </Box>
  )
}

export default EmojiSpinner