import { useEffect } from 'react';
import { Button } from '@wing/ui';
import type { Announcement } from '../model/types';

interface AnnouncementModalProps {
  announcements: Announcement[];
  onConfirm: () => void;
}

export function AnnouncementModal({ announcements, onConfirm }: AnnouncementModalProps) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onConfirm();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onConfirm]);

  return (
    <div className="announcement-modal" onClick={onConfirm}>
      <div className="announcement-modal__content" onClick={(e) => e.stopPropagation()}>
        <div className="announcement-modal__header">
          <span className="announcement-modal__title">업데이트 안내</span>
          <button
            className="announcement-modal__close"
            onClick={onConfirm}
            type="button"
            aria-label="닫기"
          >
            ✕
          </button>
        </div>

        <div className="announcement-modal__body">
          {announcements.map((announcement) => (
            <div key={announcement.id} className="announcement-modal__section">
              <div className="announcement-modal__section-header">
                <span className="announcement-modal__section-title">{announcement.title}</span>
                <span className="announcement-modal__date">{announcement.date}</span>
              </div>
              <ul className="announcement-modal__list">
                {announcement.items.map((item, idx) => (
                  <li key={idx} className="announcement-modal__item">
                    <span className="announcement-modal__icon">{item.icon}</span>
                    <div>
                      <div className="announcement-modal__item-title">{item.title}</div>
                      {item.description && (
                        <div className="announcement-modal__item-desc">{item.description}</div>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="announcement-modal__footer">
          <Button variant="primary" size="md" onClick={onConfirm}>
            확인
          </Button>
        </div>
      </div>
    </div>
  );
}
