/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useTheme } from "next-themes";
// pi dash imports
import { useTranslation } from "@pi-dash/i18n";
// assets
import darkOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp?url";
import lightOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-light.webp?url";

export function PageNavigationPaneOutlineTabEmptyState() {
  // theme hook
  const { resolvedTheme } = useTheme();
  // asset resolved path
  const resolvedPath = resolvedTheme === "light" ? lightOutlineAsset : darkOutlineAsset;
  // translation
  const { t } = useTranslation();

  return (
    <div className="grid size-full place-items-center">
      <div className="flex flex-col items-center gap-y-6 text-center">
        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the outline of a page" />
        <div className="space-y-2.5">
          <h4 className="text-14 font-medium">{t("Missing headings")}</h4>
          <p className="text-13 font-medium text-secondary">
            {t("Let's put some headings in this page to see them here.")}
          </p>
        </div>
      </div>
    </div>
  );
}
