/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/

'use client';

import { AbstractApi } from '@/app/api/abstract-api';
import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
import { useParams } from 'next/navigation';
import { TabPanel, TabView } from 'primereact/tabview';
import { useEffect, useState } from 'react';


export default function Page() {
  const params = useParams<{ slug: string, id: string }>()

  const serializer = new InvitationSerializer();
  const api = new AbstractApi<Invitation>();

  const [invitation, setInvitation] = useState<Invitation | null>(null);

  useEffect(() => {
    api.get(serializer, params.id, (invitation) => {
      setInvitation(invitation);
    });
  }, [params.slug, params.id]);

  return (
  <div>
    {invitation && (
    <TabView>
      {invitation.guests.map((guest, index) => (
      <TabPanel key={index} header={guest.name}>
        <div>
        <p><strong>Name:</strong> {guest.name}</p>
        </div>
      </TabPanel>
      ))}
    </TabView>
    )}
  </div>
  );
}