'use client'

import { useState, useEffect } from 'react'
import { Signal, Clock, Gauge } from 'lucide-react'

interface ConnectionStatusProps {
  quality: 'high' | 'medium' | 'low'
}

export function ConnectionStatus({ quality }: ConnectionStatusProps) {
  const [stats, setStats] = useState({
    latency: 45,
    fps: 60,
    bitrate: 8.5,
  })

  // Simulate varying connection stats
  useEffect(() => {
    const interval = setInterval(() => {
      setStats({
        latency: Math.floor(35 + Math.random() * 20),
        fps: quality === 'high' ? 60 : quality === 'medium' ? 30 : 15,
        bitrate: quality === 'high' ? 8 + Math.random() * 2 : quality === 'medium' ? 4 + Math.random() : 1 + Math.random() * 0.5,
      })
    }, 1000)

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

  return (
    <div className="flex items-center justify-center gap-6 h-8 bg-card/80 backdrop-blur border-t border-border/50 text-xs text-muted-foreground">
      <div className="flex items-center gap-1.5">
        <Clock className="h-3 w-3" />
        <span>{stats.latency}ms</span>
      </div>
      <div className="flex items-center gap-1.5">
        <Gauge className="h-3 w-3" />
        <span>{stats.fps} FPS</span>
      </div>
      <div className="flex items-center gap-1.5">
        <Signal className="h-3 w-3" />
        <span>{stats.bitrate.toFixed(1)} Mbps</span>
      </div>
    </div>
  )
}