import React from 'react'
import classNames from 'classnames/bind';
import styles from './Detailfee.scss';

const cx = classNames.bind(styles);

const Fee = () => {
  return (
    <table className={cx('table')}>
      <thead className={cx('body')}>
        <tr>
          <th className={cx('body')}>수수료 항목</th>
          <th className={cx('body')}>발생 비용</th>
          <th className={cx('body')}>상세 내용</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td className={cx('body')}>거래수수료</td>
          <td className={cx('body')}>거래 총액의 1% (추후 변동 가능)</td>
          <td className={cx('body')}>작품 구매 시 거래에 사용한 코인의 형태로 회사에서 과금(환불불가)</td>
        </tr>
        <tr>
          <td className={cx('body')}>구매 시 발생 블록체인 수수료</td>
          <td className={cx('body')}>이더리움 블록체인의 실시간 과금 기준에 따라 과금. 지갑에 최소 0.1 이더리움 입금 권고. 실제 거래 시 대부분 이 금액보다 낮게 소요되나 충분하게 입금 권고.</td>
          <td className={cx('body')}>회사에서 과금 하는 것이 아닌 이더리움 블록체인 자체에서 발생하는 수수료로 회사의 수익과 무관함 (환불불가)</td>
        </tr>
      </tbody>
    </table>
  )
}

const Detailfee = () => {
  return (
    <div className={cx('container')}>
      <h2 className={cx('info')}>구매자 기준 수수료</h2>
      <Fee />
      <h2 className={cx('info')}>작품 출품 작가 기준 수수료</h2>
      <table className={cx('table')}>
        <thead>
          <tr className={cx('body')}>
            <th className={cx('body')}>수수료 항목</th>
            <th className={cx('body')}>발생 비용</th>
            <th className={cx('body')}>상세 내용</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className={cx('body')}>컬렉션 생성 수수료</td>
            <td className={cx('body')}>이더리움 블록체인의 실시간 과금 기준에 따라 과금</td>
            <td className={cx('body')}>회사에서 과금하는 것이 아닌 이더리움 블록체인 자체에서 발생하는 수수료로 회사의 수익과 무관함 (환불불가)<br></br>무료로 업로드 희망 시 기존 생성된 MetaRare Multi, MetaRare Single 컬렉션으로 무료 업로딩 가능</td>
          </tr>
        </tbody>
      </table>
      <h2 className={cx('info')}>작품 출품 작가 기준 수익</h2>
      <table className={cx('table')}>
        <thead>
          <tr className={cx('body')}>
            <th className={cx('body')}>수익 항목</th>
            <th className={cx('body')}>산정 기준</th>
            <th className={cx('body')}>상세 내용</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className={cx('body')}>작품 판매 수익</td>
            <td className={cx('body')}>구매자가 작품을 구매 시 지급한 금액 중 수수료 차감 금액</td>
            <td className={cx('body')}>수익금은 판매 완료 즉시 작가의 사전 등록 지갑으로 입금</td>
          </tr>
          <tr>
            <td className={cx('body')}>재판매 수수료</td>
            <td className={cx('body')}>최초 판매와 별도로 추가 판매가 될 때 마다 작가가 사전에 설정 해 둔 수수료 기준에 따라 거래 총액에서 설정 비율로 무기한 발생</td>
            <td className={cx('body')}>수익금은 판매 완료 즉시 작가의 사전등록 지갑으로 입금</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

export default Detailfee