import React, { useRef } from 'react';
import { useLiveMetrics } from '../../hooks/useWebSocket';

export const PortraitPlayer: React.FC<{ streamId: string; youtubeVideoId: string }> = ({
  streamId,
  youtubeVideoId,
}) => {
  const playerRef = useRef<HTMLIFrameElement>(null);
  const { liveViewers, livePurchases } = useLiveMetrics(streamId);

  return (
    <div className="relative w-full max-w-[480px] mx-auto bg-black rounded-2xl overflow-hidden shadow-2xl">
      <div className="relative w-full" style={{ paddingBottom: '177.78%' }}>
        <iframe
          ref={playerRef}
          src={`https://www.youtube.com/embed/${youtubeVideoId}?autoplay=1&mute=1&controls=0&modestbranding=1&rel=0&enablejsapi=1`}
          className="absolute inset-0 w-full h-full"
          allow="autoplay; encrypted-media; picture-in-picture"
          allowFullScreen
        />
        <div className="absolute top-4 left-4 z-10 bg-black/60 text-white p-2 rounded-lg text-sm">
          <div>Viewers: {liveViewers}</div>
          <div>Purchases: {livePurchases}</div>
        </div>
      </div>
    </div>
  );
};