'use client'

import { motion } from 'framer-motion'

interface LiveIndicatorProps {
  status: 'live' | 'offline' | 'pending'
  label?: string
}

export function LiveIndicator({ status, label }: LiveIndicatorProps) {
  const colors = {
    live: 'bg-green-500',
    offline: 'bg-red-500',
    pending: 'bg-yellow-500',
  }

  const labels = {
    live: 'Live',
    offline: 'Offline',
    pending: 'Pending',
  }

  return (
    <div className="flex items-center gap-2">
      <motion.div
        animate={status === 'live' ? { scale: [1, 1.3, 1] } : {}}
        transition={{ duration: 2, repeat: Infinity }}
        className={`w-2 h-2 rounded-full ${colors[status]}`}
      />
      <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">
        {label || labels[status]}
      </span>
    </div>
  )
}