import React from 'react';
import classNames from 'classnames/bind';
import styles from './GuideDetail.scss';
import { Link, useParams } from 'react-router-dom';
import URLInfo from '@src/constants/URLInfo';
import Detailfee from '@src/components/common/guide/Detailfee';


const cx = classNames.bind(styles);

interface IOwnProps { };

const TEST_DATA = {
  NFT: {  
    title: 'NTF란 무엇인가요?',
    description: "NFT는 대체불가능 토큰 Non-Fungible Token의 약자 입니다. 블록체인 기술을 통해 만들어지며 ERC-20 토큰과는 다르게 고유한 값을 부여하여 상호 교환이 불가능한 특징이 있습니다. 이더리움은 같은 가치를 보유하고 있다면 NFT는 그와 다르게 모든 NFT가 가치가 다르기 때문에 등가교환을 할 수 없습니다. 즉, 일반 코인과 다르게 NFT는 블록체인 상에서 발행하는 토큰의 형태에 작품이 결합된 방식으로 각각의 NFT작품 하나 하나가 별도의 고유특성을 가지므로 일반 토큰처럼 거래가 되지 않고, 각 NFT 하나 하나를 별도로 거래해야 합니다."
  },
  marketplace: {  
    title: 'NFT MARKETPLACE란  무엇인가요?',
    description: "NFT  MARKETPLACE는  가지고  있는  NFT를  자유롭게  거래할  수  있는  서비스  입니다.  마켓플레이스를  사용하는  유저는  NFT를  자유롭게  거래할  수  있기  때문에  진입장벽이  낮아  쉽게  누구나 거래할  수  있습니다.  또한  작가가  내  작품을  제작하여  플랫폼에  올리면  자동으로  작품의  원작자 정보가  등재되어  위변조가  불가능  해  지므로  위작,  모작  등의  걱정없이  거래할  수  있게  해  주는 방식이기도  합니다.  또한  한번  작품이  판매  된  후에  수익금을  한번만  받을  수  있는  기존  작품  거래방식이  아닌  내가  판매한  작품이  다시  재판매  될  때  마다  사전에  작가가  지정한  재판매  수수료가  기간  한정없이 나에게  암호화폐의  형태로  입금이  되는  훨씬  우수한  방식으로  거래가  가능합니다."
  },
  metarare: {  
    title: 'MetaRare  란  무엇인가요?',
    description: "MetaRare는  다가오는  Metaverse  생태계에  최적화한  국제  NFT  거래  플랫폼으로  메타버스  시대의  희귀성이라는  뜻  (Metaverse +  Rare items)을  가지고  있습니다.  기본적으로  이더리움의  블록체인을  통해  거래를  할  수  있게  되어있으며,  작품을  구매  시  사용하는  암호화폐로는  기본적으로 이더리움(ETH)외에  메타레어의  자체토큰인  MetaRare  token  (ticker:  MTRA)와  MetaFinance  (ticker: MF1)이  통용됩니다. "
  },
  MTRA: {  
    title: 'MetaRare (Ticker: MTRA)  토큰은  무엇인가요?',
    description: "MTRA  토큰은  ERC-20  기반의  메타레어  플랫폼에서  사용되는  거버넌스  토큰입니다.  메타레어 토큰을  통해  DAO를  구성하고  NFT  거래에서  사용하는  등  다양한  방법으로  사용할  수  있습니다. 또한  메타레어로  NFT를  거래할  시에는  이더리움과  다르게  높은  할인율(할인율은  회사의  정책에 따라  임의변경  될  수  있습니다)  이  적용되어  양질의  작품을  할인된  가격으로  구매할  수  있어  그 혜택이  큽니다.  메타레어  토큰은  글로벌  1위  거래소  비트렉스(bittrex.com)을  포함한  국제  거래소에  상장이  되어있기도  합니다."
  },
  MF1: {  
    title: 'MetaFinance (Ticker: MF1)  토큰은  무엇인가요?',
    description: "메타파이낸스  토큰은  메타레어  플랫폼의  기술적인  기반을  제공하는  암호화폐로  이더리움 ERC20기술  기반으로  제작되어  있습니다.  메타레어  플랫폼에서  NFT를  거래할  시에는  이더리움과 다르게  높은  할인율(할인율은  회사의  정책에  따라  임의  변경  될  수  있습니다)이  적용되어  양질의 작품을  할인된  가격으로  구매할  수  있어  그  혜택이  큽니다. "
  },
  artist: {  
    title: 'ARTIST(작가)가  되면  혜택이  있나요?',
    description: "아티스트는  메타레어와  함께  작품  런칭의  기회와  특별  에디션을  출시  할  수  있습니다.  인증  아티스트  마크도  함께  표시되어  일반  유저와는  구별되며  신뢰받는  작가로  한걸음  나아갈  수  있습니다. "
  },
  benefit: {  
    title: 'ARTIST(작가)가  되려면  어떻게  해야하나요?',
    description: "아티스트의  문은  누구에게나  열려있습니다.  포트폴리오  등과  함께  지원을  해주시면  검증  과정을 통해  승인  여부  확인  후  안내  드리고  있습니다."
  },
  fee: {  
    title: '수수료와  수익  구조는  어떻게  되나요?',
    description: <Detailfee />
  },
  transaction: {  
    title: '거래를  위한  코인  입금은  어떻게  하나요?',
    description: "메타레어에 구글/카카오 가입을 하게 되면 시스템 내부에서 보안 모듈을 통한 신규 EVM 기반 지갑주소가 생성됩니다. 해당 지갑은 마이페이지 상단, 우측 상단 프로필 창을 눌러 확인 가능하며 0x로 시작합니다. 구매를 원하는 경우 해당 주소로 거래하기 원하는 코인/토큰을 전송합니다. 이 때 시스템에서 설정한 기본 거래 수수료 (0.1ETH)를 포함한 금액을 가지고 있어야 정상적으로 거래가 가능합니다. 또한 코인/토큰 전송의 경우 전송 횟수당 수수료가 발생하기 때문에 한번 전송에 필요한 양을 모두 송금하면 더 편리하게 거래가 가능합니다."
  },
  myNFT: {  
    title: '내 NFT는 어디에 저장되나요?',
    description: "메타레어 NFT 는 중앙화된 NFT 거래소 구조로 되어 있어, ISMS 인증에 따른 안전한 방식으로 회원의 메타레어 사이트 내 전자지갑에 안전하게 보관 됩니다."
  },
  wallet: {  
    title: '지갑은 무엇인가요?',
    description: "지갑은  암호화폐를  보관하는  장소입니다.  개인마다  고유번호가  부여된  지갑을  통해  자산을  옮기거나  NFT를  구매하는  것에  사용할  수  있습니다."
  },
  mobile: {  
    title: '모바일 앱으로도 이용이 가능한가요?',
    description: "현재는 PC 버전에서만 거래가 가능하며 추후 app 으로 확대할 계획입니다."
  },
  refund: {  
    title: '구매한 아이템을 환불하고 싶어요.',
    description: "NFT 로 구매한 아이템은 전달 받는 순간 귀속 되기 때문에 환불이 불가능합니다. 구매 시 꼭 잘 확인하고 구매해 주세요."
  },
};


const GuideDetail = ({ }) => {

  const {id} = useParams<{id: keyof typeof TEST_DATA}>();
  const { title, description } = TEST_DATA[id];

  return (
    <div className={cx('guide_detail')}>
      <strong className={cx('title')}>{title}</strong>
      <div className={cx('contents')}>
        {description}
      </div>
      <div className={cx('btn_area')}>
        <Link to={URLInfo.GUIDE} className={cx('btn_all')}>돌아가기</Link>
      </div>
    </div>
  )
}

export default GuideDetail;