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

/**
 * 예능 일정 섹션 컴포넌트
 */
function VarietySection({ schedule }) {
  const members = schedule.members || [];
  const isFullGroup = members.length === 5;

  return (
    <div className="space-y-6">
      {/* 썸네일 */}
      {schedule.thumbnailUrl && (
        <div className="rounded-xl overflow-hidden shadow-lg">
          <img
            src={schedule.thumbnailUrl}
            alt={schedule.title}
            className="w-full object-cover"
          />
        </div>
      )}

      {/* 정보 카드 */}
      <div className="bg-white rounded-xl p-6 shadow-sm">
        {/* 방송사 뱃지 + 제목 */}
        <div className="flex items-start gap-3 mb-4">
          {schedule.broadcaster && (
            <span className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1 bg-cyan-50 text-cyan-700 text-sm font-medium rounded-full">
              <Tv size={14} />
              {schedule.broadcaster}
            </span>
          )}
        </div>

        <h1 className="text-2xl font-bold text-gray-900 mb-4">
          {decodeHtmlEntities(schedule.title)}
        </h1>

        {/* 메타 정보 */}
        <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-6">
          <div className="flex items-center gap-2">
            <Calendar size={16} />
            <span>{formatFullDate(schedule.date)}</span>
          </div>
          {schedule.time && (
            <div className="flex items-center gap-2">
              <Clock size={16} />
              <span>{formatTime(schedule.time)}</span>
            </div>
          )}
        </div>

        {/* 멤버 */}
        {members.length > 0 && (
          <div className="mb-6">
            <p className="text-sm text-gray-500 mb-2">출연 멤버</p>
            <div className="flex flex-wrap gap-2">
              {isFullGroup ? (
                <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
                  프로미스나인
                </span>
              ) : (
                members.map((member) => (
                  <span key={member.id} className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
                    {member.name}
                  </span>
                ))
              )}
            </div>
          </div>
        )}

        {/* 다시보기 링크 */}
        {schedule.replayUrl && (
          <div className="pt-5 border-t border-gray-100">
            <a
              href={schedule.replayUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-5 py-2.5 bg-cyan-500 hover:bg-cyan-600 text-white rounded-xl font-medium transition-colors"
            >
              <ExternalLink size={16} />
              다시보기
            </a>
          </div>
        )}
      </div>
    </div>
  );
}

export default VarietySection;