import { useState, useEffect } from 'react';
import { getAnnouncements } from '../api/announcements';
import './AnnouncementBoard.css';

export default function AnnouncementBoard() {
  const [list, setList] = useState([]);
  const [expanded, setExpanded] = useState(null);

  useEffect(() => {
    getAnnouncements().then(setList);
  }, []);

  return (
    <section className="announcement-board">
      <h2 className="announcement-heading">공지사항</h2>
      <ul className="announcement-list">
        {list.map((item) => (
          <li key={item.id} className="announcement-item">
            <button
              className="announcement-row"
              onClick={() => setExpanded(expanded === item.id ? null : item.id)}
            >
              <span className="announcement-title">{item.title}</span>
              <span className="announcement-date">{item.createdAt?.slice(0, 10)}</span>
            </button>
            {expanded === item.id && (
              <div className="announcement-content">{item.content}</div>
            )}
          </li>
        ))}
      </ul>
    </section>
  );
}