import { Button } from "@/components/ui/button"

const ssoButtons = [
  {
    key: "google",
    name: "Google",
    imgSrc: "/images/icons/google.svg",
  },
  {
    key: "apple",
    name: "Apple",
    imgSrc: "/images/icons/apple.svg",
  },
]

function renderTemplate(template: string, data: Record<string, any>) {
  return template
    // Replace escaped placeholders with a temporary marker
    .replace(/\\(%\w+%)/g, (_, p1) => `__ESCAPED__${p1}__`)
    // Replace unescaped placeholders
    .replace(/%(\w+)%/g, (_, key) => data[key] ?? "")
    // Restore escaped placeholders
    .replace(/__ESCAPED__%(\w+)%__/g, "%$1%");
}

export function SsoButtonGroup({
  title,
  tabIndex,
  onClick,
}: {
  title?:   string,
  onClick?: (targetBtn: { key: string; name: string }) => void,
  tabIndex?: number,
}) {
  return (
    <div className="flex justify-center items-center gap-4">
      {ssoButtons.map(btn => (
        <Button
          key={btn.key}
          className="inline-flex items-center justify-center rounded-full w-[36px] h-[36px] p-0 cursor-pointer bg-transparent"
          variant="outline"
          type="button"
          title={title ? renderTemplate(title, btn) : btn.name}
          {...(tabIndex !== undefined ? { tabIndex } : {})}
        >
          <img
            src={btn.imgSrc}
            alt={btn.name + " logo"}
            className="h-5 w-5 fill-current inline-block pointer-events-none"
          />
        </Button>
      ))}
    </div>
  )
}