import Footer from "@/app/[locale]/(main)/footer"
import Header from "@/app/[locale]/(main)/header"
import { signIn } from "@/auth"
import { useLocale } from "next-intl"
import { redirect } from "next/navigation"

export const runtime = 'edge';

export function SignIn() {
    const locale = useLocale()


    async function handleSubmit(formData: FormData) {
        'use server'
        try {
            await signIn("credentials", formData)
        } catch (error) {
            redirect(`/${locale}`)
        }
    }

    return (
        <div className="flex min-h-screen w-full flex-col">
            <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:p-10 md:pt-8">
                <Header />
                <form
                    className="flex flex-col items-center justify-start gap-4 p-4 "
                    action={handleSubmit}
                >
                    <section className="flex flex-col items-start gap-2">
                        <label className="flex flex-col items-start gap-1 ">
                            <p className="text-base font-semibold">请输入页面密码</p>
                            <input className="px-1 border-[1px] rounded-[5px]" name="password" type="password" />
                        </label>
                        <button className=" px-1.5 py-0.5 w-fit text-sm font-semibold rounded-[8px] border bg-card hover:brightness-95 transition-all text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none">确认</button>
                    </section>
                </form>
                <Footer />
            </main>
        </div>
    )
}