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

// 기본 섹션 컴포넌트 (다른 카테고리용)
function DefaultSection({ schedule }) {
    return (
        <div className="space-y-6">
            {/* 제목 */}
            <h1 className="text-2xl font-bold text-gray-900 leading-relaxed">
                {decodeHtmlEntities(schedule.title)}
            </h1>

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

            {/* 설명 */}
            {schedule.description && (
                <div className="bg-gray-50 rounded-2xl p-6">
                    <p className="text-gray-700 whitespace-pre-wrap leading-relaxed">
                        {decodeHtmlEntities(schedule.description)}
                    </p>
                </div>
            )}

            {/* 원본 링크 */}
            {schedule.source?.url && (
                <a
                    href={schedule.source?.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover:bg-gray-800 text-white rounded-xl font-medium transition-colors"
                >
                    <ExternalLink size={16} />
                    원본 보기
                </a>
            )}
        </div>
    );
}

export default DefaultSection;
