"use client"

import { memo } from "react"
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
import {
  docsLoadingPhaseLabel,
  type DocsLoadingPhase,
} from "@/lib/drive/docs-loading-phase"
import { cn } from "@/lib/utils"

export function DocsLoadingSplash({
  phase = "connecting",
  title,
  className,
  overlay = false,
}: {
  phase?: DocsLoadingPhase
  title?: string
  className?: string
  /** Keep the same splash mounted as an overlay while the editor loads underneath. */
  overlay?: boolean
}) {
  const subtitle = docsLoadingPhaseLabel(phase)

  return (
    <div
      className={cn(
        "docs-loading-splash",
        overlay && "docs-loading-splash--overlay",
        className
      )}
      role="status"
      aria-live="polite"
      aria-label={subtitle}
      data-drive-app
    >
      <div className="docs-loading-splash__aurora" aria-hidden />
      <div className="docs-loading-splash__grain" aria-hidden />
      <div className="docs-loading-splash__content">
        <div className="docs-loading-splash__pill">ULTIDOCS</div>
        <img
          src={suitePublicAsset("/ultidrive-mark.svg")}
          alt=""
          className="docs-loading-splash__mark"
          width={56}
          height={56}
          decoding="async"
          draggable={false}
        />
        {title ? (
          <p className="docs-loading-splash__title" title={title}>
            {title}
          </p>
        ) : null}
        <p className="docs-loading-splash__subtitle">{subtitle}</p>
        <div className="docs-loading-splash__loader" aria-hidden>
          <span />
        </div>
      </div>
    </div>
  )
}

export const MemoDocsLoadingSplash = memo(DocsLoadingSplash)