import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";
import TextInput from "../common/inputs/TextInput";
import { Button } from "../common/ui/button";
import { ROUTES } from "../../lib/constants";

const Login = () => {
  const { login } = useAuth();
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    await login(formData);
  };

  return (
    <div className="max-w-xl mx-auto p-8 bg-[#F7F9FD] mt-6">
      <div className="text-center mb-8">
        <h1 className="text-2xl font-bold mb-4">Welcome back!</h1>
        <p className="text-gray-600">
          Need to register?{" "}
          <Link
            to={ROUTES.REGISTER}
            className="text-primary hover:text-primary/90 font-semibold"
          >
            Create an account
          </Link>
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <TextInput
          aria-label="username"
          label="Username"
          name="username"
          type="text"
          value={formData.username}
          onChange={handleChange}
          required
        />
        <TextInput
          aria-label="password"
          label="Password"
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          required
        />
        <Button type="submit" className="w-full">
          Login
        </Button>
      </form>
    </div>
  );
};

export default Login;