// src/pages/Auth/LoginForm.jsx
// Bejelentkezési űrlap

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

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  function validateEmail(email) {
    return /\S+@\S+\.\S+/.test(email);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setError("");
    if (!email || !password) {
      setError("Minden mező kitöltése kötelező.");
      return;
    }
    if (!validateEmail(email)) {
      setError("Hibás email formátum.");
      return;
    }
    // Backend API
    console.log("Bejelentkezés:", { email, password });
  };

  return (
    <motion.div
      key="login"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.25 }}
    >
      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
      {error && (
        <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
      )}
      <form onSubmit={handleSubmit}>
        <InputBox
          type="email"
          placeholder="Email cím"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <InputBox
          type="password"
          placeholder="Jelszó"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
        <Button text="Bejelentkezés" type="submit" />
      </form>
    </motion.div>
  );
}
