'use client';

import { useState, useEffect } from 'react';
import { api, Announcement } from '@/lib/api';

interface AnnouncementListProps {
  eventId: string;
}

export function AnnouncementList({ eventId }: AnnouncementListProps) {
  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadAnnouncements();
  }, [eventId]);

  const loadAnnouncements = async () => {
    try {
      setIsLoading(true);
      const data = await api.getEventAnnouncements(eventId);
      setAnnouncements(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load announcements');
    } finally {
      setIsLoading(false);
    }
  };

  if (isLoading) {
    return <div className="text-center py-4">Loading announcements...</div>;
  }

  if (error) {
    return (
      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded text-sm">
        {error}
      </div>
    );
  }

  if (announcements.length === 0) {
    return (
      <div className="text-center py-4 text-gray-500 text-sm">
        No announcements yet.
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {announcements.map((announcement) => (
        <div key={announcement.id} className="bg-white rounded-lg shadow-sm border p-4">
          <div className="flex justify-between items-start mb-2">
            <h3 className="font-semibold text-lg">{announcement.title}</h3>
            <span className="text-xs text-gray-500">
              {new Date(announcement.createdAt).toLocaleDateString()}
            </span>
          </div>
          <p className="text-gray-700 whitespace-pre-wrap">{announcement.content}</p>
          <p className="text-sm text-gray-500 mt-2">
            Posted by {announcement.authorName}
          </p>
        </div>
      ))}
    </div>
  );
}