import { DynamicPageModel } from "@/back/types/dynamic-pages";
import { AppEnv } from "@/types/global";
import { usePage } from "@inertiajs/react";
import React from "react";

type DynamicPages = Record<string, DynamicPageModel>;
type PascalCase = `${Capitalize<string>}`;
type PageKey = `page${PascalCase}`;
export default function DynamicPageResolver({
  pageKey,
  children,
}: {
  pageKey: PageKey;
  /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
  children: (data: {
    href: string;
    title: string;
    page: DynamicPageModel;
  }) => React.ReactNode;
}) {
  const dynamicPages = usePage().props.dynamicPages as DynamicPages;
  const { locale } = usePage().props.appEnv as AppEnv;

  const isValidPageKey = (key: string) => /^page([A-Z][a-z0-9]+)+$/.test(key);

  if (!isValidPageKey(pageKey)) {
    console.warn(`Invalid pageKey format: ${pageKey}`);
    return null;
  }

  const page = dynamicPages[pageKey];

  if (!page) return null;

  const href = page.slug?.[locale] ?? "#";
  const title = page.title?.[locale] ?? "";

  return <>{children({ href, title, page })}</>;
}