import Head from 'next/head';
import Payments from '../src/components/Register/Payments/Payments';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

function Payment() {
  const [formData, setFormData] = useState({});
  const router = useRouter();
  const { data } = router.query;

  useEffect(() => {
    if (data) {
      setFormData(JSON.parse(data));
    }
  }, [data]);

  if (!router.isReady) {
    return (
      <>
        <Head>
          <title>Loading...</title>
        </Head>
        <div>Loading...</div>
      </>
    );
  }

  return (
    <>
      <Head>
        <title>Payment - NSF SOUTHWEST CLOSED Tournament</title>
        <meta name="description" content="Payment - The Official Website of NSF SOUTHWEST CLOSED Tournament" />
        <meta name="keyword" content="NSF SOUTHWEST CLOSED Tournament, Southwest, Nigerian scrabble"/>
      </Head>
      <Payments form={formData} />
    </>
  );
}

export default Payment;
