import React from 'react';
import { FC } from 'react';

interface Announcements {
  id: number;
  slug: string;
  title: string;
  content: string;
  date: string;
}

interface PageProps {
  announcements: Announcements[];
}

export async function generateStaticParams() {
  const response = await fetch('https://sheetdb.io/api/v1/07ube0lmjw2nh', {})
  const data: Announcements[] = await response.json();
  return data.map((announcement) => ({
    id: announcement.id,
    slug: announcement.slug,
    title: announcement.title,
    content: announcement.content,
    date: announcement.date
  }));

}

const Page: FC<PageProps> = ({ announcements }) => {
  return (
    <div>
        <div className='flex flex-col justify-center items-center' style={{ height: '50.3333vh' }}>
          {announcements.map((announcement) => (
            <div key={announcement.id}>
              <h1>{announcement.title}</h1>
              <p>{announcement.content}</p>
              <div className='w-full text-left'>
                <p>Posted on: {announcement.date}</p>
              </div>
          </div>
          ))}
          <p>Announcement not found.</p>
      </div>
    </div>
  );
}

export default Page;