"use client";

import Form from "next/form";
import { handleLogin } from "./action";

export default function FormComponent() {
  return (
    <Form action={handleLogin}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "1rem",
          fontSize: 14,
        }}
      >
        <div style={{ display: "flex", flexDirection: "column" }}>
          Username:
          <input
            type="text"
            style={{
              height: "2rem",
              backgroundColor: "#333",
              borderStyle: "none",
              color: "#eee",
              fontSize: 16,
              padding: "0.5rem 1rem",
            }}
            name="username"
            required
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          Password:
          <input
            type="password"
            style={{
              height: "2rem",
              backgroundColor: "#333",
              borderStyle: "none",
              color: "#eee",
              fontSize: 16,
              padding: "0.5rem 1rem",
            }}
            name="password"
            required
          />
        </div>
        <div>
          <button
            style={{
              backgroundColor: "#333",
              borderStyle: "none",
              color: "#eee",
              fontSize: "1rem",
              padding: "0.5rem 1rem",
              transition: "background-color 0.3s linear",
              cursor: "pointer",
            }}
            onMouseOver={(e) => {
              e.currentTarget.style.backgroundColor = "#444";
            }}
            onMouseOut={(e) => {
              e.currentTarget.style.backgroundColor = "#333";
            }}
            type="submit"
          >
            Login
          </button>
        </div>
      </div>
    </Form>
  );
}