import { Consent } from '@signatu/consent';
import React from 'react';

import { ConsentCheckbox } from '../components/consentCheckbox';
import { DemoCard, consentContent, DemoProps } from './common';

import Highlight from 'react-highlight'

export class CheckboxDemo extends React.Component<DemoProps> { 
    name = "Checkbox"
    doc = <Highlight className='hljs'>
    {`
import {ConsentCheckbox} from '@signatu/consent-react';

const config = {
    apiKey: "YOUR_API_KEY", 
    accessToken: "YOUR_ACCESS_TOKEN"
}

render() {
    return <ConsentCheckbox
        id="buttons_consent"
        config={config} 
        subject={Consent.anonUserId()}
        issuer="signatu.com"
        target="signatu.com/demo/checkbox"
        language="en">
            <div> We can embed whatever content we want here </div>
    </ConsentCheckbox>  
}
`}
    </Highlight>

    state = {}
    
    render() {
        const demo = <ConsentCheckbox
                id="buttons_consent"
                config={this.props.config} 
                subject={Consent.anonUserId()}
                issuer="signatu.com"
                target="signatu.com/demo/checkboxandbuttons"
                language={this.props.language}>
                <div className="dataprocessing">
                    {consentContent[this.props.language]}
                </div>
            </ConsentCheckbox>   
        return <DemoCard element={demo} doc={this.doc}/>
    }
}



