'use client'

import { useMessage } from '@/hooks/useMessage'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
import Cookies from 'js-cookie'

export default function JoinComplete() {
  const router = useRouter()

  const { getMessage } = useMessage()
  const [emailText, setEmailText] = useState(Cookies.get('joinEmail'))

  return (
    <>
      <div className="center-page-wrap">
        <div className="center-page-inner complete">
          <div className="sub-table-box">
            <div className="complete-box-wrap">
              <div className="complete-tit">{getMessage('join.complete.title')}</div>
              <div className="complete-txt">{getMessage('join.complete.contents')}</div>
              <div className="complete-email-wrap">
                <div className="email-info">
                  {getMessage('join.complete.email_comment')}： <span>{emailText}</span>
                </div>
              </div>
              <div className="complete-btn">
                <button
                  tyep="button"
                  className="btn-origin navy"
                  onClick={() => {
                    router.push('/login')
                  }}
                >
                  {getMessage('join.btn.login_page')}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}