import { ServiceVersionData } from '@/pages/ModelDeployment/types';
import { getServiceVersionDocsReq } from '@/services/modelDeployment';
import { to } from '@/utils/promise';
import { useEffect, useState } from 'react';
import styles from './index.less';

type UserGuideProps = {
  info?: ServiceVersionData;
};

function UserGuide({ info }: UserGuideProps) {
  const [docs, setDocs] = useState('');

  useEffect(() => {
    // 获取服务文档
    const getModelDeploymentDocs = async () => {
      if (info) {
        const [res] = await to(getServiceVersionDocsReq(info.id));
        if (res && res.data && res.data.docs) {
          setDocs(JSON.stringify(res.data.docs, null, 2));
        }
      }
    };
    getModelDeploymentDocs();
  }, [info]);

  return <div className={styles['user-guide']}>{docs}</div>;
}

export default UserGuide;
