import {FC} from "react";
import {useLocation} from "react-router-dom";
import {Helmet} from "react-helmet";
import './ThankYou.css';

const ThankYou: FC = () => {
    const location = useLocation();
    type DynamicFormData = {
        [key: string]: string;
    };

    if (location.state === null || location.state.formData === undefined) {
        return (
            <div className="container">
                <p>Are you in the right place? It doesn't look like you completed a form or an email verification!</p>
            </div>
        )
    }

    const formData: DynamicFormData = location.state.formData;

    return (
        <div className="container">
            <Helmet>
                <title>Thank you!</title>
            </Helmet>
            <header className="header">Thank you for completing the form and verifying your email!<br></br>This is the data you entered:</header>
            <div className="fields">
                <table>
                    <tbody>
                    {Object.entries(formData).map(([key, value]) => (
                        <tr className="form-data-row" id={key}>
                            <td className="form-data-key">{key}</td>
                            <td className="form-data-value">{value}</td>
                        </tr>
                    ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}


export default ThankYou;