"use client"

import Link from "next/link"
import { cn } from "@/lib/utils"

type AuthConnectButtonCommon = {
  children: React.ReactNode
  className?: string
}

type AuthConnectButtonAsButton = AuthConnectButtonCommon &
  React.ButtonHTMLAttributes<HTMLButtonElement> & {
    href?: undefined
  }

type AuthConnectButtonAsAnchor = AuthConnectButtonCommon &
  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
    href: string
  }

type AuthConnectButtonAsLink = AuthConnectButtonCommon &
  Omit<React.ComponentProps<typeof Link>, "href"> & {
    href: string
    as: "link"
  }

export type AuthConnectButtonProps =
  | AuthConnectButtonAsButton
  | AuthConnectButtonAsAnchor
  | AuthConnectButtonAsLink

/** UltiSpace gradient CTA — full width, centered in auth flows. */
export function AuthConnectButton(props: AuthConnectButtonProps) {
  const { children, className } = props
  const btnClass = cn("ultimail-login-connect-btn w-full", className)

  let control: React.ReactNode
  if ("as" in props && props.as === "link") {
    const { as: _as, href, className: _c, children: _ch, ...linkProps } = props
    control = (
      <Link href={href} className={btnClass} {...linkProps}>
        {children}
      </Link>
    )
  } else if ("href" in props && props.href) {
    const { href, className: _c, children: _ch, ...anchorProps } = props
    control = (
      <a href={href} className={btnClass} {...anchorProps}>
        {children}
      </a>
    )
  } else {
    const { className: _c, children: _ch, ...buttonProps } = props
    control = (
      <button className={btnClass} {...buttonProps}>
        {children}
      </button>
    )
  }

  return (
    <div className="ultimail-login-connect-action">
      <div className="ultimail-login-connect-border">{control}</div>
    </div>
  )
}