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 { SignOutIcon } from "@phosphor-icons/react";
import ListLink from "@/components/list-link";

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

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