// src/pages/Auth/ResetPassword.jsx
// Új jelszó megadása

import { useState } from "react";
import Background from "../../assets/backgrounds/Background";
import { motion } from "framer-motion";
import Button from "../../components/Buttons/Button";
import InputBox from "../../components/Inputs/InputBox";

export default function ResetPassword() {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      setError("A jelszavak nem egyeznek.");
      return;
    }
    setError("");
    // Backend API
    console.log("Új jelszó:", password);
  };

  return (
    <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
      <Background />
      <motion.div
        initial={{ height: "auto" }}
        animate={{ height: "350px" }}
        transition={{ duration: 0.5, ease: "easeInOut" }}
        className="absolute flex max-w-2xl w-full bg-white rounded-2xl shadow-lg overflow-hidden items-center justify-center"
      >
        <div className="w-full p-10 relative">
          <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
            Új jelszó megadása
          </h2>
          <form onSubmit={handleSubmit}>
            <InputBox
              type="password"
              placeholder="Új jelszó"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <InputBox
              type="password"
              placeholder="Új jelszó megerősítése"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
            {error && (
              <div className="text-red-500 text-sm mb-2">{error}</div>
            )}
            <Button text="Jelszó beállítása" type="submit" />
          </form>
        </div>
      </motion.div>
    </div>
  );
}
