import React from 'react';
import classNames from 'classnames/bind';
import styles from './Guide.scss';
import { Link } from 'react-router-dom';
import URLInfo from '@src/constants/URLInfo';

const cx = classNames.bind(styles);

interface IOwnProps { 
  id: string
};

const TEST_DATA = [...new Array(1).keys()].map(() => ({
  title: '메타레어 알아보기',
  list: [
    {
      title: 'NFT란 무엇인가요?',
      link: 'NFT'
    },
    {
      title: 'NFT MARKETPLACE 란 무엇인가요.?',
      link: 'marketplace'
    },
    {
      title: 'MetaRare 란 무엇인가요?',
      link: 'metarare'
    },
    {
      title: 'MetaRare (Ticker: MTRA) 토큰은 무엇인가요?',
      link: 'MTRA'
    },
    {
      title: 'MetaFinance (Ticker: MF1) 토큰은 무엇인가요?',
      link: 'MF1'
    },
  ],
}));
const TEST_DATA1 = [...new Array(1).keys()].map(() => ({
  title: '메타레어의 혜택 알아보기',
  list: [
		{
      title: 'ARTIST(작가)가 되면 혜택이 있나요?',
      link: 'artist'
    },
    {
      title: 'ARTIST(작가)가 되려면 어떻게 해야하나요?',
      link: 'benefit'
    },
    {
      title: '수수료와 수익 구조는 어떻게 되나요?',
      link: 'fee'
    },
  ],
}));

const TEST_DATA2 = [...new Array(1).keys()].map(() => ({
  title: '메타레어의 기술 알아보기',
  list: [
    {
      title: '거래를 위한 코인 입금은 어떻게 하나요?',
      link: 'transaction'
    },
    {
      title: '내 NFT 는 어디에 저장되나요?',
      link: 'myNFT'
    },
    {
      title: '지갑이 무엇인가요?',
      link: 'wallet'
    },
    {
      title: '모바일 앱으로도 이용이 가능한가요?',
      link: 'mobile'
    },
  ],
}));

const TEST_DATA3 = [...new Array(1).keys()].map(() => ({
  title: '메타레어 사용자 문제 해결하기',
  list: [
    {
      title: '구매한 아이템을 환불하고 싶어요.',
      link: 'refund'
    }
  ],
}));

const Guide = () => {
  return (
    <div className={cx('guide')}>
      <strong className={cx('title')}>사용방법</strong>
      <div className={cx('contents')}>
        <ul className={cx('list_set')}>
          {TEST_DATA.map((list, index) => (
            <li className={cx('list')} key={index}>
              <div className={cx('inner')}>
                <strong className={cx('list_title')}>{list.title}</strong>
                <ul className={cx('container')}>
                  {list.list.map((item,index) => (
                    <li className={cx('content_list')} key={index}>
                      <Link to={URLInfo.getGuideDetailUrl(item.link)} className={cx('link')}>{item.title}</Link>
                    </li>
                  ))}
                  <li className={cx('content_list')}>
                    <a href="https://drive.google.com/drive/folders/1NVqdbWgLLb9HnQ2_S-z9d_fhduKtZxZn?usp=sharing" target="_blank" className={cx('link_blank')}>메타레어 전체 사용방법</a>
                  </li>
                </ul>
                <div className={cx('btn_area')}>
                  {/* <Link to={URLInfo.getGuideDetailUrl(list.id)} className={cx('btn_all')}>전체보기</Link> */}
                </div>
              </div>
            </li>
          ))}
          {TEST_DATA1.map((list, index) => (
            <li className={cx('list')} key={index}>
              <div className={cx('inner')}>
                <strong className={cx('list_title')}>{list.title}</strong>
                <ul className={cx('container')}>
                  {list.list.map((item,index) => (
                    <li className={cx('content_list')} key={index}>
                      <Link to={URLInfo.getGuideDetailUrl(item.link)} className={cx('link')}>{item.title}</Link>
                    </li>
                  ))}
                </ul>
                <div className={cx('btn_area')}>
                  {/* <Link to={URLInfo.getGuideDetailUrl(list.id)} className={cx('btn_all')}>전체보기</Link> */}
                </div>
              </div>
            </li>
          ))}
          {TEST_DATA2.map((list, index) => (
            <li className={cx('list')} key={index}>
              <div className={cx('inner')}>
                <strong className={cx('list_title')}>{list.title}</strong>
                <ul className={cx('container')}>
                  {list.list.map((item,index) => (
                    <li className={cx('content_list')} key={index}>
                      <Link to={URLInfo.getGuideDetailUrl(item.link)} className={cx('link')}>{item.title}</Link>
                    </li>
                  ))}
                </ul>
                <div className={cx('btn_area')}>
                  {/* <Link to={URLInfo.getGuideDetailUrl(list.id)} className={cx('btn_all')}>전체보기</Link> */}
                </div>
              </div>
            </li>
          ))}
          {TEST_DATA3.map((list, index) => (
            <li className={cx('list')} key={index}>
              <div className={cx('inner')}>
                <strong className={cx('list_title')}>{list.title}</strong>
                <ul className={cx('container')}>
                  {list.list.map((item,index) => (
                    <li className={cx('content_list')} key={index}>
                      <Link to={URLInfo.getGuideDetailUrl(item.link)} className={cx('link')}>{item.title}</Link>
                    </li>
                  ))}
                </ul>
                <div className={cx('btn_area')}>
                  {/* <Link to={URLInfo.getGuideDetailUrl(list.id)} className={cx('btn_all')}>전체보기</Link> */}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default Guide;