import PKCE from "./authmethods/_pkce.mdx";
import Basic from "./authmethods/_basic.mdx";
import Implicit from "./authmethods/_implicit.mdx";
import PKCENative from "./authmethods/_pkcenative.mdx";
import JWTPrivateKey from "./authmethods/_jwtpk.mdx";

export default function AuthMethods(props) {
  const { Tab, Tabs } = props.components || {};
  return props.selected == "web" ? (
    <div>
      <Tabs
        groupId="auth-type"
        default="pkce"
        values={[
          { label: "PKCE", value: "pkce" },
          { label: "Basic Auth", value: "basic" },
          { label: "JWT with Private Key", value: "jwtpk" },
        ]}
      >
        <Tab value="pkce">
          <PKCE components={props.components}  />
        </Tab>
        <Tab value="basic">
          <Basic components={props.components}  />
        </Tab>
        <Tab value="jwtpk">
          <JWTPrivateKey components={props.components}  />
        </Tab>
      </Tabs>
    </div>
  ) : props.selected == "native" ? (
    <Tabs
      groupId="auth-type"
      default="pkce"
      values={[{ label: "PKCE", value: "pkce" }]}
    >
      <Tab value="pkce">
        <PKCE components={props.components} Native />
      </Tab>
    </Tabs>
  ) : props.selected == "spa" ? (
    <Tabs
      groupId="auth-type"
      default="pkce"
      values={[
        { label: "PKCE", value: "pkce" },
        { label: "Implicit", value: "implicit" },
      ]}
    >
      <Tab value="pkce">
        <PKCE components={props.components}  />
      </Tab>
      <Tab value="implicit">
        <Implicit components={props.components}  />
      </Tab>
    </Tabs>
  ) : null;
}