import BracketPreview from "@/features/admin/components/preview";
import { NumberInput } from "@mantine/core";
import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useLingui } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";

export const Route = createFileRoute("/_authed/admin/preview")({
  component: RouteComponent,
  loader: () => ({
    header: {
      withBackButton: true,
      title: msg`Bracket Preview`,
    },
    withPadding: false,
    fullWidth: true,
  }),
});

function RouteComponent() {
  const { t } = useLingui();
  const [n, setN] = useState(16);
  return (
    <>
      <NumberInput
        min={9}
        max={27}
        label={t`Number of teams`}
        value={n}
        onChange={(value) => setN(value as number)}
        w={150}
        mb={2}
        mx="md"
      />
      <BracketPreview n={n} />
    </>
  );
}