'use client'

import { useActionState } from 'react';
import InputField from "@/components/InputField";
import { login } from "./action";


export default function Login(){
    const [state, formAction, pending] = useActionState(login, '');

    return(
        <div>
            <form action={formAction}>
                {state &&
                    <div className='error-message'>
                        {state}
                    </div>
                }
                <h2 className="text-lg font-medium text-secondary-100">Login to continue</h2>
                <InputField
                    id="email"
                    placeholder="Email"
                    label="Email"
                />
                <InputField
                    id="password"
                    placeholder="Password"
                    label="Password"
                    type="password"
                />
                <button 
                    className="button button-primary mt-6 w-full text-center"
                    type='submit'
                    disabled={pending}
                >
                    Login
                </button>
            </form>
        </div>
    )
}