"use client";

import { useActionState } from "react";
import { KeyRound, Loader2 } from "lucide-react";
import { changePasswordAction, type AuthState } from "@/app/actions/auth";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function ChangePasswordForm() {
  const [state, action, pending] = useActionState(changePasswordAction, {} as AuthState);
  return (
    <form action={action} className="grid gap-5">
      <div><Label>كلمة المرور الجديدة</Label><Input name="password" type="password" dir="ltr" minLength={6} autoComplete="new-password" required /></div>
      <div><Label>تأكيد كلمة المرور</Label><Input name="confirmation" type="password" dir="ltr" minLength={6} autoComplete="new-password" required /></div>
      {state.error ? <p className="rounded-md bg-[#fae5e5] px-4 py-3 text-sm font-semibold text-[#922f31]">{state.error}</p> : null}
      {state.success ? <p className="rounded-md bg-[#e2f3e9] px-4 py-3 text-sm font-semibold text-[#17613b]">{state.success}</p> : null}
      <Button type="submit" disabled={pending}>{pending ? <Loader2 className="animate-spin" size={18} /> : <KeyRound size={18} />} {pending ? "جارٍ تحديث كلمة المرور..." : "تحديث كلمة المرور"}</Button>
    </form>
  );
}
