import { Button } from "@wrnexus/ui"

component AuthProviderButtons {
  outputs {
    select(payload: { provider: string; href: string })
  }

  props {
    providers: unknown[] = []
    title: string = "Continue with"
    dividerLabel: string = "or"
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }

  functions {
    client function choose(provider) {
      output.select({ provider: provider.id || provider.name || provider.label, href: provider.href || "" })
    }
  }

  view {
    <div {...attrs} class='space-y-3 {class}'>
      {#if title}<p class="m-0 text-sm font-semibold text-[var(--wrn-color-text)]">{title}</p>{/if}
      <div class="grid gap-2 sm:grid-cols-2">
        {#each providers as provider}
          <Button
            label='{provider.label || provider.name || "Continue"}'
            href='{provider.href || ""}'
            icon='{provider.icon || "icon-[lucide--log-in]"}'
            variant='{provider.variant || "outline"}'
            color='{provider.color || color}'
            size='{size}'
            fullWidth="true"
            @click='choose(provider)'
          />
        {/each}
      </div>
      {#if dividerLabel}
        <div class="flex items-center gap-3 text-xs text-[var(--wrn-color-muted)]"><span class="h-px flex-1 bg-[var(--wrn-color-border)]"></span><span>{dividerLabel}</span><span class="h-px flex-1 bg-[var(--wrn-color-border)]"></span></div>
      {/if}
    </div>
  }
}