import type { FormEvent } from "react"
import React from "react"

import type { NextPage } from "next"

import { Button, Input } from "@/components"
import { useSignUpMutation } from "@/services"

const Login: NextPage = () => {
  const { mutate: signUp } = useSignUpMutation()

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)

    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
    const values = Object.fromEntries(formData) as any
    signUp(values)
  }

  return (
    <div className={"flex h-screen items-center justify-center"}>
      <form
        className={"flex w-96 flex-col gap-3 rounded-md border p-6"}
        onSubmit={handleSubmit}
      >
        <h1 className={"font-bold text-2xl"}>Sign up</h1>
        <label className={"flex flex-col gap-1"}>
          Username (optional)
          <Input name={"username"} type="text" />
        </label>
        <label className={"flex flex-col gap-1"}>
          Email
          <Input name={"email"} type="email" />
        </label>

        <label className={"flex flex-col gap-1"}>
          Password
          <Input type="password" name={"password"} />
        </label>

        <Button className={"w-full"} type={"submit"}>
          Login
        </Button>
      </form>
    </div>
  )
}

export default Login