'use client';

import { useState, useEffect } from 'react';

export default function ViewerCount() {
  const [viewerCount, setViewerCount] = useState(0);

  useEffect(() => {
    // Simulate viewer count updates
    // In a real app, this would connect to a WebSocket or API
    const updateViewers = () => {
      const baseCount = 42;
      const variance = Math.floor(Math.random() * 10);
      setViewerCount(baseCount + variance);
    };

    updateViewers();
    const interval = setInterval(updateViewers, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center gap-2 bg-black/50 backdrop-blur-sm border border-cyan-500/30 rounded-lg px-4 py-2">
      <div className="relative">
        <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
        <div className="absolute inset-0 w-2 h-2 bg-red-500 rounded-full animate-ping"></div>
      </div>
      <span className="text-cyan-400 font-mono text-sm font-medium">
        {viewerCount.toLocaleString()} watching
      </span>
    </div>
  );
}