import type { MeetingSummary } from '../lib/api'

type Props = {
  meetings: MeetingSummary[]
  isEditMode: boolean
  selectedIds: Set<number>
  onToggleSelect: (id: number) => void
  onSelectMeeting: (id: number) => void
}

function formatDate(value: string) {
  const date = new Date(value)
  return date.toLocaleString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

export default function MeetingList({
  meetings,
  isEditMode,
  selectedIds,
  onToggleSelect,
  onSelectMeeting,
}: Props) {
  return (
    <div className="meeting-list">
      {meetings.length === 0 && (
        <div className="placeholder">저장된 대화가 없습니다.</div>
      )}
      {meetings.map((meeting) => (
        <div key={meeting.id} className="meeting-item">
          {isEditMode ? (
            <label className="meeting-checkbox">
              <input
                type="checkbox"
                checked={selectedIds.has(meeting.id)}
                onChange={() => onToggleSelect(meeting.id)}
              />
              <span>{formatDate(meeting.started_at)}</span>
            </label>
          ) : (
            <button
              className="meeting-button"
              type="button"
              onClick={() => onSelectMeeting(meeting.id)}
            >
              <span className="bullet">•</span>
              <span>{formatDate(meeting.started_at)}</span>
            </button>
          )}
        </div>
      ))}
    </div>
  )
}
