// src/pages/Auth/ForgotPassword.jsx
// Itt kéri az emailt amire a jelszó visszaállítást kérjük

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 ForgotPassword() {
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // Backend API
    console.log("Elfelejtett jelszó email:", email);
  };

  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: "300px" }}
        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">
            Elfelejtett jelszó
          </h2>
          <form onSubmit={handleSubmit}>
            <InputBox
              type="email"
              placeholder="Email cím"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button text="Jelszó visszaállítása" type="submit" />
          </form>
        </div>
      </motion.div>
    </div>
  );
}
