import { createFileRoute } from "@tanstack/react-router";
import { Box, Title, Stack } from "@mantine/core";
import { ColorSchemePicker } from "@/features/settings/components/color-scheme-picker";
import AccentColorPicker from "@/features/settings/components/accent-color-picker";
import LocalePicker from "@/features/settings/components/locale-picker";
import { NotificationsSection } from "@/features/settings/components/notifications-section";
import { SignOutIcon } from "@phosphor-icons/react";
import ListLink from "@/components/list-link";
import { Trans, useLingui } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";

export const Route = createFileRoute("/_authed/settings")({
  loader: () => ({
    header: {
      title: msg`Settings`,
      withBackButton: true,
    },
    withPadding: false,
  }),
  component: RouteComponent,
});

function RouteComponent() {
  const { t } = useLingui();
  return (
    <>
      <Box
        px="md"
        py="sm"
        style={{
          borderBottom: "1px solid var(--mantine-color-default-border)",
        }}
      >
        <Title order={3}><Trans>Appearance</Trans></Title>
        <Stack>
          <AccentColorPicker />
          <ColorSchemePicker />
          <LocalePicker />
        </Stack>
      </Box>
      <NotificationsSection />
      <ListLink label={t`Sign Out`} to="/logout" Icon={SignOutIcon} />
    </>
  );
}