'use client';

import './style.scss';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import { Registration } from '@/lib/api/auth';

export default function Welcome()
{
	const router = useRouter();
    const [error, setError] = useState<string>('');

    useEffect(() => {
        if (error) {
            alert(error);
			router.push('/register');
        }
    }, [error, router]);

    useEffect(() => {
        const email: string|null = sessionStorage.getItem('email');

        if (!email) {
            setError("잘못된 접근입니다.");
        }

		Registration(email).then().catch(err => {
			setError(err.message);
		}).finally(() => {
            sessionStorage.removeItem('email');
        });
    }, []);

    return (
        <div id="welcomeForm" className="row-start-2 flex flex-row flex-wrap gap-2">
            <fieldset className="grow">
                <legend>회원가입을 환영합니다.</legend>
                <svg xmlns="http://www.w3.org/2000/svg" width="15%" height="15%" fill="currentColor" className="pt-2 pb-3" viewBox="0 0 16 16">
                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
                </svg>
                <p>회원가입 절차가 완료되었습니다.<br/>로그인 후 서비스를 이용하실 수 있습니다.</p>
                <hr/>
                <div className="text-center">
                    <Link href="/login" className="btn btn-submit w-full sm:w-auto">로그인 하기</Link>
                </div>
            </fieldset>
        </div>
    );
}