"use client";

export function HomeAuthControls(): React.ReactElement {
  return (
    <div className="mt-6 flex flex-wrap gap-2">
      <button
        type="button"
        onClick={async () => {
          await fetch("/api/dev/login", { method: "POST" });
          window.location.href = "/protected";
        }}
        className="rounded-md bg-brand-primary px-4 py-2 text-white hover:bg-brand-secondary"
      >
        Sign in as Alice → /protected
      </button>
      <button
        type="button"
        onClick={async () => {
          await fetch("/api/dev/logout", { method: "POST" });
          window.location.reload();
        }}
        className="rounded-md border border-neutral-300 px-4 py-2 hover:bg-neutral-50"
      >
        Sign out
      </button>
    </div>
  );
}