import { useState } from "react"
import useStore from "../stores/useStore.js"
import { Link } from "react-router-dom"
function Register() {
  const { register } = useStore()
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  
  const handleSubmit = async (e) => {
    e.preventDefault()
    await register(username, password)
  }
  return (
        <div className="w-screen flex justify-center items-center p-8 bg-gray-100">
          <div className="w-1/3  flex flex-col justify-center items-center bg-white text-gray-800 p-8 rounded gap-4 shadow-xl">
            <h1 className="text-4xl font-bold">Register</h1>
            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
              <div className="flex flex-col w-full gap-2">
                <label htmlFor="username">Username:</label>
                <input type="text" className="py-3 outline-none border rounded px-8" name="username" value={username} onChange={e => setUsername(e.target.value)} />
              </div>
              <div className="flex flex-col w-full gap-2">
                <label htmlFor="password">Password:</label>
                <input type="password" className="py-3 outline-none border rounded px-8" name="password" value={password} onChange={e => setPassword(e.target.value)} />
              </div>
              <div className="flex flex-col w-full gap-2">
                <button type="submit" className="py-3 outline-none rounded px-8 bg-blue-700 text-white text-xl shadow transition duration-500 hover:scale-102" >Register</button>
                <span className="text-center">Arleady have account? <Link to="/login" className="text-blue-700 underline">Login</Link></span>
              </div>
            </form>
          </div>
        </div>
  )
}

export default Register