import { Flex, Typography } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { CodexDiffPreviewer } from '../CodexDiffPreviewer';

const { Paragraph } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'codex-diff-previewer',
  componentId: 'codex-diff-previewer',
  title: 'Codex Diff Previewer',
  description: '변경 파일 전체 소스와 raw diff 아코디언을 함께 보여주는 codex 스타일 diff preview 컴포넌트입니다.',
  category: 'Display',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 71,
  features: ['docs'],
};

const sampleDiff = `diff --git a/src/components/previewer/CodexDiffBlock.tsx b/src/components/previewer/CodexDiffBlock.tsx
new file mode 100644
index 0000000..1111111
--- /dev/null
+++ b/src/components/previewer/CodexDiffBlock.tsx
@@ -0,0 +1,8 @@
+export function CodexDiffBlock() {
+  return null;
+}
diff --git a/src/components/markdownPreview/MarkdownPreviewContent.tsx b/src/components/markdownPreview/MarkdownPreviewContent.tsx
index 2222222..3333333 100644
--- a/src/components/markdownPreview/MarkdownPreviewContent.tsx
+++ b/src/components/markdownPreview/MarkdownPreviewContent.tsx
@@ -12,6 +12,10 @@ export function MarkdownPreviewContent() {
   if (codeLanguage === 'diff') {
+    return <CodexDiffBlock diffText={value} />;
+  }
+
   return renderEditorBlock(value, codeLanguage, 'code');
 }`;

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <Paragraph>
        변경 파일 목록과 raw diff를 같은 화면에서 전환해 보도록 만든 공통 preview입니다. 작업일지 `## 소스`와 일반 문서의 `diff` 코드블록 표현을 같은 스타일로 맞출 때 사용합니다.
      </Paragraph>
      <CodexDiffPreviewer
        title="작업 소스"
        description="변경/신규 파일 기준 전체 소스와 raw diff를 함께 표시합니다."
        files={[
          {
            path: 'src/components/previewer/CodexDiffBlock.tsx',
            previousPath: null,
            status: 'added',
            language: 'tsx',
            content: `export function CodexDiffBlock() {\n  return null;\n}`,
          },
          {
            path: 'src/components/markdownPreview/MarkdownPreviewContent.tsx',
            previousPath: null,
            status: 'modified',
            language: 'tsx',
            content: `if (codeLanguage === 'diff') {\n  return <CodexDiffBlock diffText={value} />;\n}`,
          },
        ]}
        diffText={sampleDiff}
        height={360}
      />
    </Flex>
  );
}
