import { Embed } from '@/components/content/embed'
import { Article } from '@/types/content-types'
import { CodeFiles } from './code-files'

export function Example({ article }: { article: Article }) {
	const server = 'https://examples.tldraw.com'
	// both are null when the README has no `component:` frontmatter
	const additionalFiles = article.componentCodeFiles ? JSON.parse(article.componentCodeFiles) : {}
	const files = [
		...(article.componentCode ? [{ name: 'App.tsx', content: article.componentCode }] : []),
		...Object.keys(additionalFiles).map((key) => ({ name: key, content: additionalFiles[key] })),
	]

	// article.id is in format "sectionId/categoryId/articleId", we need just the articleId
	const slug = article.id.split('/').pop()

	return (
		<div className="w-full mt-8">
			<Embed src={`${server}/${slug}/full?utm_source=docs-embed`} />
			<CodeFiles files={files} />
		</div>
	)
}