// app/login/LoginForm.tsx

'use client';

import { useActionState } from 'react';
import { loginAction } from './actions';

export default function LoginForm() {
    const [state, formAction, isPending] = useActionState(loginAction, null);

    return (
        <form action={formAction} className="bg-white p-8 rounded-lg shadow-xl w-full max-w-sm transition-all duration-300">
            <h1 className="text-2xl font-bold mb-6 text-center text-[#406185]">Admin Login</h1>

            {state?.error && (
                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded mb-4 text-center text-sm font-bold animate-shake">
                    {state.error}
                </div>
            )}

            <input
                type="password"
                name="password"
                placeholder="Lösenord"
                className="w-full border p-3 rounded mb-4 focus:ring-2 focus:ring-[#406185] outline-none transition-all"
                required
            />

            <button
                type="submit"
                disabled={isPending}
                className="w-full bg-[#406185] text-white p-3 rounded font-bold hover:bg-black disabled:bg-gray-400 transition-all active:scale-95"
            >
                {isPending ? 'Loggar in...' : 'Logga in'}
            </button>
        </form>
    );
}