"use client";

import { useEffect, useState } from "react";

/** Shows a button per configured provider, or nothing when none are set up. */
export function SocialLoginButtons() {
  const [available, setAvailable] = useState<Record<string, boolean>>({});

  useEffect(() => {
    fetch("/api/social")
      .then((r) => (r.ok ? r.json() : {}))
      .then(setAvailable)
      .catch(() => {});
  }, []);

  const providers = [
    { key: "google", name: "Google", mark: "G", colour: "#ea4335" },
    { key: "facebook", name: "Facebook", mark: "f", colour: "#1877f2" },
    { key: "github", name: "GitHub", mark: "‹›", colour: "#18181b" },
  ].filter((p) => available[p.key]);

  if (providers.length === 0) return null;

  return (
    <>
      <div className="sl-divider">or</div>

      <div className="sl-buttons">
        {providers.map((p) => (
          <a key={p.key} href={`/api/auth/social/${p.key}`} className="sl-btn">
            <span
              style={{ color: p.colour, fontWeight: 900, fontSize: 16 }}
              aria-hidden
            >
              {p.mark}
            </span>
            Continue with {p.name}
          </a>
        ))}
      </div>
    </>
  );
}