'use client';

import { useState } from 'react';
import type { BroadcastInfo } from '@/types/broadcast';
import styles from './LivePlayer.module.scss';

interface LivePlayerProps {
  broadcast: BroadcastInfo;
}

export default function LivePlayer({ broadcast }: LivePlayerProps) {
  const [isPlaying, setIsPlaying] = useState(true);

  return (
    <div className={styles.playerContainer}>
      {/* 비디오 플레이어 영역 */}
      <div className={styles.videoPlayer}>
        {/* 플레이어 배경 */}
        <div className={styles.playerBackground}>
          {/* 중앙 비디오 아이콘 */}
          <div className={styles.centerIcon}>
            <svg width="48" height="48" fill="currentColor" viewBox="0 0 24 24">
              <path d="M15 8v8H5V8h10m1-2H4a1 1 0 00-1 1v10a1 1 0 001 1h12a1 1 0 001-1V7a1 1 0 00-1-1z"/>
              <path d="M18 6h2a1 1 0 011 1v10a1 1 0 01-1 1h-2"/>
            </svg>
          </div>
        </div>

        {/* 플레이어 오버레이 컨트롤 */}
        <div className={styles.playerOverlay}>
          {/* 재생/일시정지 버튼 (중앙) */}
          <button
            className={styles.playButton}
            onClick={() => setIsPlaying(!isPlaying)}
          >
            {isPlaying ? (
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
              </svg>
            ) : (
              <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
            )}
          </button>

          {/* 하단 컨트롤 바 */}
          <div className={styles.controlBar}>
            {/* 진행 바 */}
            <div className={styles.progressBar}>
              <div className={styles.progressFill} style={{ width: '35%' }}></div>
            </div>

            {/* 컨트롤 버튼들 */}
            <div className={styles.controls}>
              <div className={styles.leftControls}>
                <button className={styles.controlBtn}>
                  <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
                  </svg>
                </button>
                <span className={styles.timeDisplay}>LIVE</span>
              </div>

              <div className={styles.rightControls}>
                <button className={styles.controlBtn}>
                  <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}