'use client';

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

interface LiveSectionProps {
  broadcasts: BroadcastInfo[];
  isLoading?: boolean;
}

export default function LiveSection({ broadcasts, isLoading = false }: LiveSectionProps) {
  return (
    <section className={styles['live-section']}>
      <h2 className={styles['section-title']}>📺 실시간 LIVE</h2>
      <div className={styles['video-grid']}>
        {isLoading ? (
          // 로딩 스켈레톤 (8개)
          Array.from({ length: 8 }).map((_, index) => (
            <div key={`skeleton-${index}`} className={styles['skeleton-card']}>
              <div className={styles['skeleton-thumbnail']}></div>
              <div className={styles['skeleton-info']}>
                <div className={styles['skeleton-text']}></div>
                <div className={styles['skeleton-text-small']}></div>
              </div>
            </div>
          ))
        ) : (
          broadcasts.map((broadcast) => (
            <BroadcastCard
              key={broadcast.id}
              broadcast={broadcast}
              variant="grid"
            />
          ))
        )}
      </div>
    </section>
  );
}