import { Loader2 } from "lucide-react";
import { AmanahMark } from "@/components/brand/AmanahMark";
import { Button } from "@/components/ui/button";

export function WorkspaceSplash({
  status = "loading",
  onRetry,
}: {
  status?: "loading" | "error";
  onRetry?: () => void;
}) {
  const isError = status === "error";

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background px-6">
      <div className="flex max-w-sm flex-col items-center text-center">
        <AmanahMark size={56} className="shadow-[0_1px_3px_rgba(40,56,80,0.16)]" />
        <p className="mt-5 font-display text-[22px] font-bold tracking-[0.12em] text-primary uppercase">
          Amanah
        </p>

        {isError ? (
          <>
            <h1 className="mt-8 font-display text-[18px] font-semibold text-foreground">
              Something went wrong
            </h1>
            <p className="mt-1.5 text-[13.5px] leading-6 text-muted-foreground">
              We couldn’t load your workspace.
            </p>
            {onRetry ? (
              <Button type="button" className="mt-6" onClick={onRetry}>
                Try again
              </Button>
            ) : null}
          </>
        ) : (
          <>
            <Loader2
              size={20}
              className="mt-8 animate-spin text-brand"
              aria-hidden="true"
            />
            <p className="mt-5 text-[14.5px] font-medium text-foreground">
              Loading your workspace...
            </p>
            <p className="mt-1 text-[13px] text-muted-foreground">Please wait a moment.</p>
          </>
        )}
      </div>
    </div>
  );
}