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

/**
 * 기본 일정 섹션 컴포넌트 (일반 카테고리용)
 */
function DefaultSection({ schedule }) {
  return (
    <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.datetime)}</span>
        </div>
        {schedule.datetime?.includes('T') && schedule.datetime.split('T')[1] !== '00:00:00' && (
          <div className="flex items-center gap-2">
            <Clock size={16} />
            <span>{formatTime(schedule.datetime?.split('T')[1])}</span>
          </div>
        )}
      </div>

      {/* 멤버 */}
      {schedule.members && schedule.members.length > 0 && (
        <div className="mb-6">
          <p className="text-sm text-gray-500 mb-2">참여 멤버</p>
          <div className="flex flex-wrap gap-2">
            {schedule.members.length === 5 ? (
              <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">프로미스나인</span>
            ) : (
              schedule.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.description && (
        <div className="pt-6 border-t border-gray-100">
          <p className="text-gray-600 leading-relaxed whitespace-pre-wrap">{decodeHtmlEntities(schedule.description)}</p>
        </div>
      )}
    </div>
  );
}

export default DefaultSection;