Untitled

import React, {useContext, useEffect, useRef, useState} from "react";
import RadioButton from "../../atoms/radioButton/radioButton";
import Checkbox from "../../atoms/checkbox/checkbox";
import currencies from "../../../shared/assets/currencies";
import Select, { StylesConfig } from 'react-select';

export interface IDonationCurrencies {

}

const selectStyles: StylesConfig = {
    control: (styles) => ({
        ...styles,
        backgroundColor: '#1F2832',
        border: '2px solid #4C555F',
        height: '56px',
        color: 'white !important',
        borderRadius: 0,
        fontFamily: 'Nuno, sans-serif',
    }),
    valueContainer: (styles) => ({
        ...styles,
        padding: '0 16px',
        height: '100%'
    }),
    indicatorsContainer: (styles) => ({
        ...styles,
        width: '48px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#343E48',
        height: '100%',
        color: "white",
        svg: {
            fill: "white"
        }
    }),
    menu: (styles) => ({
        ...styles,
        color: 'white',
        backgroundColor: '#1F2832'
    }),
    input: (styles) => ({
        ...styles,
        color: 'white',
    }),
    singleValue: (styles) => ({
        ...styles,
        color: 'white',
    }),
    option: (styles, { data, isDisabled, isFocused, isSelected}) => ({
        ...styles,
        color: isSelected ? '#1F2832' : 'white',
        backgroundColor: isSelected ? 'white' : '#1F2832'
    }),
    indicatorSeparator:(styles) => ({
        ...styles,
        display: 'none'
    }),
    placeholder: (styles) => ({
        ...styles,
        color: '#797E84',
        fontSize: '16px',
        fontFamily: 'Nuno, sans-serif'
    })
}

const DonationCurrencies: React.FC<IDonationCurrencies> = (props) => {

    const {

    } = props;

    let isChecked = false;

    const stableCurrency = (
        <div>
            <span className="radio-title mb-1">Stable currency attached to dolar value</span>
            <span className="radio-description inline-block">Donations automatically convert to coin of stable value and preserve value over time.</span>
        </div>
    );

    const preferredCurrency = (
        <div>
            <span className="radio-title mb-1">Specific preferred currency (Ethereum, Binance coin...)</span>
            <span className="radio-description inline-block">We automatically convert donations to currency that you prefer, or you trust in. Depending on selection, value can fluctuate over time.</span>
        </div>
    );

    const currencyDonation = (
        <div>
            <span className="radio-title mb-1">Currency donation was made in <span className="font-normal underline">(44 coins available)</span></span>
        </div>
    );

    const earnInterest = (
        <div>
            <span className="checkbox-title">Earn interest on available assets</span>
            <span className="checkbox-description">There is no additional risk included. Value change can only happen due to currency price fluctuation.</span>
        </div>
    );

    return (
        <div className="mt-24">
            <h3 className="font-serif text-base font-bold text-brand-500 text-2xl mb-2">Donation currencies</h3>
            <span className="text-gray-50 text-sm font-normal font-sans mb-6 block">How would you like to  receive and handle the donations.</span>

            <div className="mt-2">
                <span className="text-placeholder text-sm font-normal font-sans mb-4 block">In which currencies you would like to receive donations?</span>
                <RadioButton value="name" name="name" children={currencyDonation} />
                <RadioButton value="name" name="name" children={preferredCurrency} />
                <RadioButton value="name" name="name" children={stableCurrency} />
            </div>

            <div className="mb-6 mt-3 block">
                <span className="text-placeholder text-sm font-normal font-sans mb-3 block">Select preferred currency</span>
                <Select
                    options={currencies}
                    placeholder="Select preferred currency"
                    styles={selectStyles}
                />

            </div>

            <div className="relative inline-block text-left">
                <div>
                    <span className="text-placeholder text-sm font-normal font-sans mb-3 block">Additional earning options</span>
                    <Checkbox id="checkbox" checked={isChecked} onChange={() => { isChecked = !isChecked }} children={earnInterest} />
                </div>
            </div>
        </div>
    )
}

export default DonationCurrencies;