'use client';

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

interface StreamerInfoSectionProps {
  broadcast: BroadcastInfo;
}

export default function StreamerInfoSection({ broadcast }: StreamerInfoSectionProps) {
  return (
    <>
      {/* 제목 영역 */}
      <div className={styles.titleSection}>
        <h1 className={styles.streamTitle}>{broadcast.title}</h1>
      </div>

      {/* 스트리머 정보 + 액션 버튼 영역 */}
      <div className={styles.infoActionsContainer}>
        <div className={styles.streamerInfo}>
          <div className={styles.streamerAvatar}>
            <div className={styles.avatarPlaceholder}>
              {broadcast.channel.charAt(0).toUpperCase()}
            </div>
          </div>
          <div className={styles.streamerDetails}>
            <div className={styles.streamerName}>
              bj {broadcast.channel}
            </div>
            <div className={styles.viewerCount}>
              <span>👥 {broadcast.viewerCount.toLocaleString()}</span>
            </div>
          </div>
        </div>

        <div className={styles.videoActions}>
          <div className={styles.actionButtons}>
            <button className={styles.bookmarkBtn}>
              <svg
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
                />
              </svg>
            </button>
            <button className={styles.shareBtn}>
              <svg
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </>
  );
}