import React, { useState } from "react";
import { supabase } from "../supabaseClient";

export default function ResetPassword() {

  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const handleUpdate = async (e) => {
    e.preventDefault();
    setLoading(true);

    const { error } = await supabase.auth.updateUser({
      password: password
    });

    if (error) {
      alert(error.message);
    } else {
      alert("Password updated successfully!");
      window.location.href = "/";
    }

    setLoading(false);
  };

  return (
    <div style={{padding:"40px", color:"white"}}>

      <h2>Reset Your Password</h2>

      <form onSubmit={handleUpdate}>
        <input
          type="password"
          placeholder="Enter new password"
          value={password}
          onChange={(e)=>setPassword(e.target.value)}
          style={{padding:"10px", margin:"10px"}}
        />

        <button type="submit">
          {loading ? "Updating..." : "Update Password"}
        </button>

      </form>

    </div>
  );
}