import React, { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';

type tutorialTypeProps = {
  tutorialType: 'env' | 'compInstance';
};

const ConfigTutorial: React.FC<tutorialTypeProps> = ({ tutorialType }) => {
  const [markdown, setMarkdown] = useState('');

  useEffect(() => {
    const fileMap = {
      env: '/assets/环境配置教程.md',
      compInstance: '/assets/组件实例指引.md'
    };

    fetch(fileMap[tutorialType])
      .then(response => response.text())
      .then(text => setMarkdown(text))
      .catch(error => console.error('Error loading markdown file:', error));
  }, [tutorialType]);

  return (
    <div style={{ padding: '20px' }}>
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
  );
};

export default ConfigTutorial;