import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Text } from '@pancakeswap/uikit'

const Explain = styled.div`
  margin-top: 30px;
  text-align: left;
`

const ExplainText = styled(Text)`
  font-size: 14px;
  color: #999999;
  margin-bottom: 10px;
`
const CombinationRules: React.FC = () => {
  const { t } = useTranslation()

  return (
    <Explain>
      <ExplainText>{t('combination rules')}</ExplainText>
      <ExplainText>
        {t(
          '1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;',
        )}
      </ExplainText>
      <ExplainText>
        {t(
          '2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;',
        )}
      </ExplainText>
      <ExplainText>
        {t(
          '3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;',
        )}
      </ExplainText>
      <ExplainText>
        {t(
          '4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;',
        )}
      </ExplainText>
    </Explain>
  )
}
export default CombinationRules