"use client";

import { useFormStatus } from "react-dom";

// Eigene Schaltfläche statt der Button-Komponente: Microsoft gibt für „Sign in
// with Microsoft" Fläche, Schrift und Logo vor, und eine magentafarbene
// Variante wäre nicht nur regelwidrig, sondern auch irreführend — sie sähe aus
// wie eine Aktion *in* dieser Anwendung, während sie in Wirklichkeit auf eine
// fremde Anmeldeseite springt.
export function EntraSignInButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      aria-busy={pending || undefined}
      className="inline-flex w-full items-center justify-center gap-3 rounded-md border border-[#8c8c8c] bg-white px-4 py-3
                 text-sm font-semibold text-[#5e5e5e] transition-colors hover:bg-[#f3f3f3]
                 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500
                 disabled:cursor-not-allowed disabled:opacity-60"
    >
      <svg viewBox="0 0 21 21" className="h-[18px] w-[18px] shrink-0" aria-hidden="true">
        <rect x="1" y="1" width="9" height="9" fill="#f25022" />
        <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
        <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
        <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
      </svg>
      {pending ? "Weiterleitung zu Microsoft…" : "Mit Firmenkonto anmelden"}
    </button>
  );
}