'use client';

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

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

export default function PopularSection({ broadcasts, isLoading = false }: PopularSectionProps) {
  return (
    <section className={styles['popular-section']}>
      <h2 className={styles['section-title']}>🔥 인기 LIVE</h2>
      <div className={styles['carousel-container']}>
        <div className={styles['carousel-track']}>
          {isLoading ? (
            // 로딩 스켈레톤 (5개)
            Array.from({ length: 5 }).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="carousel"
              />
            ))
          )}
        </div>
      </div>
    </section>
  );
}