export default {
  name: "Internal Link",
  acceptsChildren: true,
  category: "Basic",
  props: [
    {
      label: "Link",
      name: "to",
      type: { kind: "route", isDynamic: true },
      isDefault: true,
      default: "",
      placeholder: "select a page",
      help: "The page the link will go to",
    },
    {
      label: "Query Params",
      name: "query",
      type: { kind: "static", of: "queryParam", isList: true },
      default: null,
      placeholder: "Select an (optional) set of query params",
      help: "The query params you'd like to pass to the page",
    },
    {
      label: "Preserve existing query params?",
      name: "preserveSearchParams",
      type: { kind: "boolean" },
      default: false,
      placeholder: "Preserve existing query params?",
      help: "Toggle to preserve existing query params when navigating to the new page",
    },
    {
      label: "Open in a new tab",
      name: "newTab",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "Should the link open in a new tab",
      help: "Should the link open in a new tab",
    },
    {
      label: "Active on exact match",
      name: "end",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "Should the link be active on exact match",
      help: "Should the link be active on exact match",
    },
  ],
  additionalStates: [
    {
      label: "Link is active",
      value: "._active",
    },
    {
      label: "Link is pending",
      value: "._pending",
    },
  ],
  events: [
    {
      label: "When clicked",
      name: "onClick",
      help: "Select an action to run when container is clicked",
    },
  ],
  /*
  styleProps: [
    {
      label: "Variant",
      name: "variant",
      type: { kind: "select" },
      options: [
        {
          label: "Solid",
          value: "solid",
          selector: '._active[data-variant="solid"]',
          styles: {
            "": {
              "background-color": "var(--palette-solid)",
              color: "var(--palette-contrast)",
            },
            " svg": {
              color: "var(--palette-contrast)",
            },
          },
        },
        {
          label: "Subtle",
          value: "subtle",
          selector: '._active[data-variant="subtle"]',
          styles: {
            "": {
              "background-color": {
                __type: "color",
                color: "var(--palette-muted)",
                opacity: 65,
              },
            },
            " svg": {
              color: "var(--palette-fg)",
            },
          },
        },
        {
          label: "Outline",
          value: "outline",
          selector: '._active[data-variant="outline"]',
          styles: {
            "": {
              "background-color": "transparent",
              "border-width": "1px",
              "border-color": "var(--theme-brand-neutral-muted)",
            },
            " svg": {
              color: "var(--palette-fg)",
            },
            ":hover": {
              "background-color": "transparent",
            },
          },
        },
        {
          label: "Elevated",
          value: "elevated",
          selector: '._active[data-variant="elevated"]',
          styles: {
            "": {
              "border-width": "1px",
              "border-color": "var(--theme-brand-neutral-muted)",
              "background-color": "var(--theme-bg-default)",
              "box-shadow": "var(--theme-shadows-sm)",
            },
            " svg": {
              color: "var(--palette-fg)",
            },
          },
        },
        {
          label: "Line",
          value: "line",
          selector: '[data-variant="line"]',
          styles: {
            "": {
              color: "var(--theme-fg-muted)",
            },
            " svg": {
              color: "var(--theme-fg-muted)",
            },
            "._active": {
              color: "var(--theme-fg-default)",
              position: "relative",
            },
            "._active svg": {
              color: "var(--theme-fg-default)",
            },
            "._active::before": {
              content: "''",
              position: "absolute",
              bottom: "-1px",
              "inset-inline": "0",
              height: "2px",
              background: "var(--palette-solid)",
            },
          },
        },
        {
          label: "None",
          value: "none",
          selector: '._active[data-variant="none"]',
          styles: {
            "": {},
          },
        },
      ],
      default: "none",
    },
    {
      label: "Color Palette",
      name: "data-palette",
      type: { kind: "palette" },
      default: "neutral",
      help: "The color scheme of the button",
    },
  ],
  */
  defaultStyles: {
    ":focus-visible": {
      "box-shadow": "var(--theme-shadows-outline)",
    },
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
    },
  },
  sources: [],
} as const;