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

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

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