import { NextPage } from 'next'
import AuthLayout, {
  AuthInput,
  AuthPassword,
} from '../components/layout/authentication/AuthLayout'
import Link from '../components/common/Link'

const SignUpPage: NextPage = () => {
  return (
    <AuthLayout>
      <div className="space-y-8">
        <h2 className="text-xl text-pink-300">Sign Up</h2>
        <div>
          <form className="space-y-8">
            <div className="space-y-3">
              <AuthInput name="username" required>
                Username
              </AuthInput>
              <AuthPassword name="password" required>
                Password
              </AuthPassword>
              <AuthPassword name="confirm-password" required>
                Confirm Password
              </AuthPassword>
            </div>
            <button
              type="submit"
              className="w-full py-2 px-4 rounded bg-pink-300 text-white font-bold"
            >
              Ok
            </button>
          </form>
        </div>

        <Link page="/sign-in" className="text-center block text-gray-600">
          Sign in instead?
        </Link>
      </div>
    </AuthLayout>
  )
}

export default SignUpPage