import React from 'react'
import { Breadcrumb, SimpleCard } from 'app/components'
import { Box, styled } from '@mui/system'

import {
    PDFDownloadLink,
    Page,
    Text,
    View,
    Document,
    StyleSheet,
} from '@react-pdf/renderer'

const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4',
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1,
    },
})
const MyDoc = () => (
    <Document>
        <Page size="A4" style={styles.page}>
            <View style={styles.section}>
                <Text>Name: Muhammad Uqba</Text>
                <Text>Question: here question</Text>
                <Text>Answer: here answer</Text>
            </View>
        </Page>
    </Document>
)

const TestPDF = () => {
    return (
        <div>
            UQBA
            <div>
                <PDFDownloadLink document={<MyDoc />} fileName="test.pdf">
                    {({ blob, url, loading, error }) =>
                        loading ? 'Loading document...' : 'Download now!'
                    }
                </PDFDownloadLink>
            </div>
        </div>
    )
}

export default TestPDF
