"use client";
import { useState } from "react";
import { AuthLandscape } from "@/components/premium/auth/auth-landscape";
export function AuthLandscapePreview() {
  const [message, setMessage] = useState<string | null>(null);
  return (
    <div className="w-full">
      <AuthLandscape
        onAppleSignIn={async () => {
          setMessage("Demo: connect your Apple sign-in provider to continue.");
        }}
        onGithubSignIn={async () => {
          setMessage("Demo: connect your GitHub OAuth provider to continue.");
        }}
        onGoogleSignIn={async () => {
          setMessage("Demo: connect your Google OAuth provider to continue.");
        }}
        onEmailSignIn={async () => {
          await new Promise((resolve) => setTimeout(resolve, 500));
          setMessage("Demo complete — no email was sent.");
        }}
      />
      {message && (
        <p
          aria-live="polite"
          className="px-4 pb-6 text-center text-xs text-muted-foreground"
        >
          {message}
        </p>
      )}
    </div>
  );
}

"use client";

import { AuthSplit } from "@/components/premium/auth";

export function AuthSplitPreview() {
  return (
    <div className="w-full">
      <AuthSplit />
    </div>
  );
}

"use client";

import { AuthCentered } from "@/components/premium/auth";

export function AuthCenteredPreview() {
  return (
    <div className="w-full">
      <AuthCentered />
    </div>
  );
}

"use client";

import { AuthOtp } from "@/components/premium/auth";

export function AuthOtpPreview() {
  return (
    <div className="w-full">
      <AuthOtp />
    </div>
  );
}

"use client";

import { AuthAtlas } from "@/components/premium/auth";

export function AuthAtlasPreview() {
  return (
    <div className="w-full">
      <AuthAtlas />
    </div>
  );
}

"use client";

import { AuthAtlasSplit } from "@/components/premium/auth";

export function AuthAtlasSplitPreview() {
  return (
    <div className="w-full">
      <AuthAtlasSplit />
    </div>
  );
}