import type { Metadata } from "next";
import { PlateSection } from "@/components/settings-plate";
import { PageTitle } from "@/components/ui";
import { requireViewer } from "@/lib/auth";
import { PasswordForm, ProfileForm } from "./forms";

export const metadata: Metadata = { title: "Your profile" };

export default async function ProfileSettingsPage() {
  const viewer = await requireViewer();
  return (
    <div>
      <PageTitle title="Public profile" description="How you appear to others across the instance." />
      <div className="flex flex-col gap-7">
        <PlateSection title="Profile">
          <ProfileForm user={viewer} />
        </PlateSection>
        <PlateSection title="Change password">
          <p className="px-6 pt-5 type-body text-ink2">Use a long, unique password.</p>
          <PasswordForm />
        </PlateSection>
      </div>
    </div>
  );
}