'use client';

import dynamic from 'next/dynamic';
import type { DocsLocale } from '@/lib/docs-types';
import { DEFAULT_DOC_SLUG } from '@/lib/docs-types';


// EN: Loading component for MDX content
// VI: Component loading cho nội dung MDX
const LoadingDocs = () => (
  <div style={{ padding: '2rem', textAlign: 'center' }}>
    <p>Loading documentation...</p>
  </div>
);

// EN: Error component for missing docs
// VI: Component lỗi cho docs thiếu
const DocNotFound = ({ slug }: { slug: string }) => (
  <div style={{ padding: '2rem', textAlign: 'center' }}>
    <h2>Documentation Not Found</h2>
    <p>The requested documentation &quot;{slug}&quot; could not be found.</p>
    <p>Please check the URL or navigate using the sidebar.</p>
  </div>
);

type DocsContentClientProps = {
  locale: DocsLocale;
  slug: string;
};

export default function DocsContentClient({ locale, slug }: DocsContentClientProps) {
  // EN: Use slug directly (already includes category path e.g., 'guides/getting-started')
  // VI: Dùng slug trực tiếp (đã bao gồm đường dẫn category)
  const slugPath = slug || DEFAULT_DOC_SLUG;


  // EN: Dynamic import based on locale and slug with category path
  // VI: Dynamic import dựa trên locale và slug với đường dẫn category
  const Component = dynamic(
    () => import(`../../../../../docs/${locale}/${slugPath}.md`)
      .catch((error) => {
        console.error(`Failed to load doc: ${locale}/${slugPath}`, error);
        // EN: Return error component if doc doesn't exist
        // VI: Trả về error component nếu doc không tồn tại
        return { default: () => <DocNotFound slug={slugPath} /> };
      }),
    {
      loading: () => <LoadingDocs />,
      ssr: true
    }
  );

  return <Component />;
}

