import {useEffect, useState} from "react";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {listCmsArticle} from "@/api/cms/cmsArticle";
import {Collapse} from '@nutui/nutui-react-taro'
import {ArrowDown} from '@nutui/icons-react-taro'


const Helper = () => {
  const [list, setList] = useState<CmsArticle[]>([])

  const reload = () => {
    listCmsArticle({model: 'help'}).then(res => {
      setList(res)
    }).catch(error => {
      console.error("Failed to fetch goods detail:", error);
    })
  }

  useEffect(() => {
    reload()
  }, []);

  return (
    <div className={'p-3'}>
      {list.map((item, index) => (
        <Collapse defaultActiveName={['1', '2']} expandIcon={<ArrowDown/>}>
          <Collapse.Item
            title={
              <div className={'flex items-center'}>
                <div className={'text-sm'}>{item.title}</div>
              </div>
            }
            name={`${index}`}
          >
            <div className={'text-sm'}>{item.comments}</div>
          </Collapse.Item>
        </Collapse>
      ))}
    </div>
  );
};

export default Helper;