import type { Metadata } from "next";
import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";
import { PushSubscribeButton } from "@/components/pwa/push-subscribe-button";
import { NotificationCategoriesForm } from "@/components/settings/notification-categories-form";
import { getMessages } from "@/lib/i18n/server";

export const metadata: Metadata = {};

export default async function NotificationsPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  const m = getMessages((session?.user as { locale?: string })?.locale);

  return (
    <div className="space-y-8">
      <section className="rounded-xl border p-6 space-y-4">
        <div>
          <h2 className="font-semibold text-lg">{m.settings.pushNotifications.title}</h2>
          <p className="text-sm text-muted-foreground mt-1">
            {m.settings.pushNotifications.description}
          </p>
        </div>
        <PushSubscribeButton />
      </section>

      <section className="rounded-xl border p-6 space-y-4">
        <div>
          <h2 className="font-semibold text-lg">{m.settingsForm.notificationCategories.title}</h2>
          <p className="text-sm text-muted-foreground mt-1">
            {m.settingsForm.notificationCategories.description}
          </p>
        </div>
        <NotificationCategoriesForm />
      </section>
    </div>
  );
}
