OIDC Core

"use client"

import * as React from "react"

import { GithubIcon, GithubPolicyForm } from "@/components/oidc/provider-github"
import { ProviderPicker } from "@/components/oidc/picker"
import { VercelIcon, VercelPolicyForm } from "@/components/oidc/provider-vercel"
import { Alert, AlertTitle } from "@/components/ui/alert"
import type { OidcPolicy } from "@/lib/oidc/policy"

// This file is yours: add or remove providers by editing PROVIDERS and the forms below.
const PROVIDERS = [
  { label: "GitHub Actions", value: "github", icon: GithubIcon },
  { label: "Vercel", value: "vercel", icon: VercelIcon },
]

function OidcPolicyForm() {
  const [provider, setProvider] = React.useState("github")
  const [saved, setSaved] = React.useState(false)

  const onSubmit = (policy: OidcPolicy) => {
    // Replace with your save, e.g. the savePolicy server action.
    console.log(provider, policy)
    setSaved(true)
  }

  return (
    <div className="flex flex-col gap-6">
      <ProviderPicker
        providers={PROVIDERS}
        value={provider}
        onValueChange={setProvider}
      />
      {saved ? (
        <Alert>
          <AlertTitle>Policy saved.</AlertTitle>
        </Alert>
      ) : null}
      {provider === "github" ? <GithubPolicyForm onSubmit={onSubmit} /> : null}
      {provider === "vercel" ? <VercelPolicyForm onSubmit={onSubmit} /> : null}
    </div>
  )
}

export { OidcPolicyForm }