veza/apps/web/src/components/studio/go-live-view/GoLiveViewPreview.tsx

import { Radio, Monitor } from 'lucide-react';

interface GoLiveViewPreviewProps {
  isLive: boolean;
}

export function GoLiveViewPreview({ isLive }: GoLiveViewPreviewProps) {
  return (
    <div className="aspect-video bg-black rounded-xl overflow-hidden border border-border relative group">
      {isLive ? (
        <div className="w-full h-full flex items-center justify-center bg-card">
          <div className="text-center animate-pulse">
            <Radio className="w-16 h-16 text-destructive mx-auto mb-4" />
            <p className="text-muted-foreground">Receiving Stream Data...</p>
          </div>
        </div>
      ) : (
        <div className="w-full h-full flex flex-col items-center justify-center bg-card/50 text-muted-foreground">
          <div className="text-center">
            <Monitor className="w-16 h-16 mx-auto mb-4 opacity-50" />
            <p>Stream Offline</p>
            <p className="text-xs mt-2">Connect OBS to start preview</p>
          </div>
        </div>
      )}
      <div className="absolute top-4 right-4 bg-black/50 px-2 py-1 rounded text-xs text-foreground font-mono">
        1080p 60fps
      </div>
    </div>
  );
}