fromis_9/frontend/src/pages/pc/public/schedule/sections/VarietySection.jsx

import { Calendar, Clock, Tv, ExternalLink, Play } from 'lucide-react';
import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';

/**
 * 예능 일정 섹션 컴포넌트
 */
function VarietySection({ schedule }) {
  const members = schedule.members || [];
  const isFullGroup = members.length === 5;
  const hasThumbnail = !!schedule.thumbnailUrl;
  const hasReplayUrl = !!schedule.replayUrl;
  const isYoutubeReplay = hasReplayUrl && /youtu\.?be/i.test(schedule.replayUrl);

  return (
    <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
      <div className={`${hasThumbnail ? 'flex' : ''}`}>
        {/* 왼쪽: 썸네일 */}
        {hasThumbnail && (
          <div className="flex-shrink-0 w-44">
            <img
              src={schedule.thumbnailUrl}
              alt={schedule.title}
              className="w-full h-full object-cover"
            />
          </div>
        )}

        {/* 오른쪽: 콘텐츠 */}
        <div className="flex-1 p-5 flex flex-col justify-center">
          {/* 방송사 + 날짜 */}
          <div className="flex items-center gap-2 mb-2">
            {schedule.broadcaster && (
              <span
                className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-md"
                style={{
                  backgroundColor: `${schedule.category?.color || '#06b6d4'}15`,
                  color: schedule.category?.color || '#06b6d4',
                }}
              >
                <Tv size={10} />
                {schedule.broadcaster}
              </span>
            )}
            <span className="text-xs text-gray-400">
              {formatFullDate(schedule.date)}
              {schedule.time && ` · ${formatTime(schedule.time)}`}
            </span>
          </div>

          {/* 제목 */}
          <h1 className="text-lg font-bold text-gray-900 leading-snug mb-3">
            {decodeHtmlEntities(schedule.title)}
          </h1>

          {/* 멤버 + 다시보기 */}
          <div className="flex items-center justify-between gap-4">
            {members.length > 0 && (
              <div className="flex flex-wrap gap-1.5">
                {isFullGroup ? (
                  <span className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
                    프로미스나인
                  </span>
                ) : (
                  members.map((member) => (
                    <span key={member.id} className="px-2.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
                      {member.name}
                    </span>
                  ))
                )}
              </div>
            )}

            {hasReplayUrl && (
              <a
                href={schedule.replayUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-full transition-colors"
              >
                {isYoutubeReplay ? <Play size={12} fill="currentColor" /> : <ExternalLink size={12} />}
                다시보기
              </a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default VarietySection;