"use client";

import { useActionState } from "react";
import { loginAction, type LoginState } from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { t } from "@/lib/i18n/de";

export function LoginForm() {
  const [state, formAction, pending] = useActionState<LoginState, FormData>(
    loginAction,
    null,
  );

  return (
    <form action={formAction} className="mt-6 space-y-4">
      {state?.error ? (
        <p
          role="alert"
          className="rounded-sm border border-signal/30 bg-signal/5 px-3 py-2 text-sm text-signal"
        >
          {state.error}
        </p>
      ) : null}
      <div className="space-y-1.5">
        <Label htmlFor="email">{t("auth.email")}</Label>
        <Input
          id="email"
          name="email"
          type="email"
          autoComplete="username"
          required
        />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="password">{t("auth.passwort")}</Label>
        <Input
          id="password"
          name="password"
          type="password"
          autoComplete="current-password"
          required
        />
      </div>
      <Button
        type="submit"
        variant="outline"
        className="w-full"
        disabled={pending}
      >
        {t("auth.anmelden")}
      </Button>
    </form>
  );
}
