"use client";

/**
 * /u/me/settings — dedicated reading-preferences screen for auth users.
 *
 * Mirrors the Edit Profile pattern: a focused subview of /u/me that
 * trades the tab strip for a back link + the settings form. We send
 * users here instead of opening the popover because the popover, when
 * triggered from ProfileHeader's centred action row, can spill off the
 * left edge of narrow viewports. Anonymous users still get the popover
 * in SiteHeader — that trigger sits at right-2 so it doesn't overflow.
 *
 * The /u/me layout's ConditionalTabs detects this path and hides the
 * Posts/Collections/Bookmarks/Mentions strip while the user is editing
 * settings.
 */

import Link from "next/link";
import { ChevronLeft } from "lucide-react";
import { ReadingSettings } from "@/components/reading-settings";

export default function ReadingSettingsPage() {
  return (
    <div className="space-y-6">
      <Link
        href="/u/me"
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
      >
        <ChevronLeft className="size-4" />
        Back to profile
      </Link>
      <div>
        <h1 className="font-[family-name:var(--font-title)] text-2xl font-semibold text-foreground">
          Reading settings
        </h1>
        <p className="text-sm text-muted-foreground mt-1">
          Theme, palette, font, and size — synced across your devices.
        </p>
      </div>
      <ReadingSettings variant="inline" />
    </div>
  );
}