import { defineConfig, defineFragment, g } from "./index.js";

type ButtonProps = {
  variant?: "primary" | "secondary" | "ghost" | "link";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  children?: unknown;
};

declare function Button(props: ButtonProps): null;

defineConfig({
  include: ["src/**/*.fragment.ts"],
  govern: {
    presets: ["fragments/recommended"],
    scales: {
      space: g.scale.px([0, 4, 8]),
    },
    styles: [
      g.styles.rawColors().forbid({ severity: "error" }),
      g.styles.rawSpacing().mustMatchScale("space", {
        appliesTo: ["gap"],
        severity: "error",
      }),
    ],
    jsx: [g.jsx.unknownProps().forbid({ severity: "error" })],
  },
});

defineFragment({
  component: Button,
  meta: { name: "Button", description: "Button", category: "forms" },
  guidance: { when: [], whenNot: [] },
  govern: (govern) => {
    // @ts-expect-error unknown prop
    govern.prop("missing");

    // @ts-expect-error value not in variant union
    govern.prop("variant").forbid("made-up");

    // @ts-expect-error wrong boolean value type
    govern.prop("disabled").forbid("true");

    return [
      govern.prop("variant").forbid("secondary"),
      govern.prop("size").avoid("lg"),
      govern.prop("disabled").forbid(true),
    ];
  },
});

defineFragment<ButtonProps>({
  component: Button,
  meta: { name: "ExplicitButton", description: "Button", category: "forms" },
  guidance: { when: [], whenNot: [] },
  govern: (govern) => [govern.prop("variant").forbid("ghost")],
});

type LinkProps = {
  href: string;
};

declare function Link(props: LinkProps): null;

defineFragment({
  component: Link,
  meta: { name: "Link", description: "Link", category: "navigation" },
  guidance: { when: [], whenNot: [] },
  govern: (govern) => {
    // @ts-expect-error unknown prop
    govern.prop("to");

    return [govern.prop("href").forbid("javascript:*")];
  },
});