import { signOut } from "@/auth";

import { LogoutButton } from "@/components/auth/LogoutButton";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

const logOutPage = () => {
  return (
    <div className="flex items-center justify-center mt-12">
      <Card className="w-full max-w-md p-6 shadow-lg">
        <CardHeader>
          <CardTitle className="text-center text-xl font-semibold">
            Möchten Sie sich wirklich abmelden?
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-center text-gray-600">
            Wenn Sie sich abmelden, werden Sie von Ihrem Konto getrennt.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center">
          <form
            action={async () => {
              "use server";
              await signOut({
                redirectTo: "/",
              });
            }}
          >
            <LogoutButton />
          </form>
        </CardFooter>
      </Card>
    </div>
  );
};

export default logOutPage;